Simple Flexible jQuery Data Table Plugin - datagrid.js

datagrid.js is a simple, extendable and Bootstrap-compatible jQuery data table plugin which helps you render dynamic data grids with pagination, filtering and sorting from local or remote data sources.

Basic usage:

1. To get started, you first needed to load the jQuery datagrid.js plugin after jQuery library like this:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.datagrid.js"></script>

2. You can also use the datagrid.js as a plugin for Bootstrap framework.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="plugins/jquery.datagrid.bootstrap3.js"></script>

3. Render a data table that loads remote data using ajax request.

var datagrid = $(container).datagrid({
    url: "source URL",
    col: [{
        field: "name",
        title: "Name",
        sortable: true
    },{
        field: "age",
        title: "Age",
        render: function( data ) {
          return "<strong>" + data.value + "<strong>";
        }
    }]
})

4. Render a data table that loads static data from a JS file.

var datagrid = $(#container).datagrid({

    // static data
    data: countries, // see 'countries.js' file

    // columns definition 
    // title, field name and sortable
    col: [{
        field: "Continent",
        title: "Continent",
        sortable: true
    },{
        field: "Name",
        title: "Name",
        sortable: true
    },{
        field: "Population",
        title: "Population",
        sortable: true
    },{
        field: "SurfaceArea",
        title: "Surface",
        sortable: true
    }],

    // table attributes set by $.attr()
    attr: { 
        "class": "table table-bordered table-condensed"
    },
    // plugin used to display sort icon 
    sorter: "bootstrap",
    // plugin used to display pagination
    pager: "bootstrap"

})

5. Render a data table from local data.

var datagrid = $(#container).datagrid({

    data: [{
        firstname: "Bob",
        lastname: "Dylan"
    },{
        firstname: "Jimi",
        lastname: "Hendrix"
    }],
    col: [{
        field: "firstname",
        title: "Firstname"
    },{
        field: "lastname",
        title: "Lastname",
        sortable: true,
        render: function( data ) {
            return "<strong>" + data.value + "<strong>";
        }
    }]

})

6. All available configuration options.

// data fetching method: function, plugin name (string) or plugin name with config (object).
source: "default", 

// server url where data are fetch (with POST params data).
url: "",

//  local data (no remote fetch). 
// If not false, source will be automatically set to "data".
data: false,

// auto load data. 
// If set to false, you need to load manualy the data with datagrid.fetch() method.
autoload: true,

// default params added to the data request.
paramsDefault: {},

// you can map param names used for paging and sorting.
paramsMapping: {
    page: "page",
    paging: "paging",
    orderby: "orderby",
    direction: "direction"
},

// callback function that parse data before render. 
// By default, decode data in JSON if data is a string.
parse: function( data ) {
    if ( $.type( data ) === "string" ) {
        return JSON.parse( data );
    } else {
        return data;
    }
},

// array of column definition objects.
col: [],

// an object of attribute-value pairs: generate the table element attributes.
attr: {},

// an object of attribute-value pairs: params for $(th).attr() if column is sortable.
attrSortable: {},

// string: it will be displayed instead of the table if there is no data. 
// function: the result returned by the function will be displayed.
noData: "no data",

// callbacks
onBefore: false,
onData: false,
onRowData: false,
onComplete: false,

// display text or icon on table header when columns are sorted (asc or desc).
sorter: "default", 

// render the pager. default pager write page numbers in a span, all in a div.
pager: "default", 

// display the pager on "bottom" of the table, or on the "top", or both with ["top","bottom"].
pagerPosition: "bottom",

// reset container
resetContainer: true

7. Default column options.

// Field name
field: "",

// Title display in the `th`content
title: "",

// Plugin
render: "default",
sortable: false,
sortableDefaultAsc: true,

// Param for '$(td).attr()'
attr: {},

// Param for '$(th).attr()'
attrHeader: {}

---

This awesome jQuery plugin is developed by creative-area. For more Advanced Usages, please check the demo page or visit the official website.