jQuery datagrid

Simple

Options used

{
    // 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"
}

Simple

Options used

{
    // server url. data posted :
    // "page", "paging", "orderby", "direction"
    url: "data/demo-simple.php",

    // 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"
}

Cell rendering

Options used

{
    // server url. data posted :
    // "page", "paging", "orderby", "direction"
    url: "data/demo-simple.php",

    // columns definition 
    // title, field name and sortable
    col: [{
        field: "Continent",
        title: "Continent",
        attrHeader: { "width": "20%" },
        render: { "fa-button" : {
            style: "default",
            size: "xs",
            icon: "plane"
        } },
        sortable: true
    },{
        field: "Name",
        title: "Name",
        attrHeader: { "width": "25%" },
        sortable: true
    },{
        field: "Population",
        title: "Population",
        attrHeader: { 
            "width": "15%", 
            "style": "text-align: right;", 
            "nowrap": "nowrap"
        },
        attr: {
            "style": "text-align: right;", 
            "nowrap": "nowrap"
        },
        sortable: true,
        render: function( data ) {
            var r = "<span ";
            if ( +data.value == 0) {
                r += "class='label label-warning'";
                data.value = "None";
            } else if ( +data.value > 100000000 ) {
                this.addClass( "success" );
            } else if ( +data.value > 10000000 ) {
                this.addClass( "warning" );
            }
            r += ">";
            if ( +data.value > 1000000 ) {
                r += Math.round(data.value/1000000) + " million";
            } else {
                r += data.value;
            }
            r += "</span>";
            return r;
        }
    },{
        field: "SurfaceArea",
        title: "Surface",
        attrHeader: { 
            "width": "15%", 
            "style": "text-align: right;", 
            "nowrap": "nowrap"
        },
        attr: { 
            "style": "text-align: right;", 
            "nowrap": "nowrap"
        },
        sortable: true,
        render: function( data ) {
            return Math.round( data.value ) + " km<sup>2</sup>";
        }
    },{
        field: "SurfaceArea",
        title: "Density",
        attrHeader: {
            "width": "15%", 
            "style": "text-align: right;", 
            "nowrap": "nowrap"
        },
        attr: { "style": "text-align: right;", "nowrap": "nowrap" },
        render: function( data ) {
            return ( +data.value > 0 ) ? Math.round( data.row.Population / data.value ) + " p/km<sup>2</sup>" : 'N/A';
        }
    }],

    // 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"
}

Filters

Options used

var dg3 = $( "#dg-demo-filters" ).datagrid({
    // same options as simple demo
});

// just pass a $element to the filters method
// works with all form elements
dg3.datagrid( "filters", "#dg-demo-filters-area" );

// you can also use .datagrid( "datagrid" ) method
// dg3.datagrid( "datagrid" ).filters( "#dg-demo-filters-area" );

Events

Options used

// cache jquery elements
$eventsInfo = $( "#dg-demo-events-info" );
$eventsArea = $( "#dg-demo-events-area" );

// datagrid
var dg4 = $( "#dg-demo-events" ).datagrid({
    // same options as simple demo
    // just add events options
    onBefore: function() {
        $eventsInfo.html( "Datagrid loading ..." );
        $eventsArea.hide();
    },
    onData: function( data ) {
        $eventsInfo.html( data.total + " countries" );
    },
    onRowData: function( data, num, $tr ) {
        if ( data.Population > 10000000 ) {
            $tr.addClass( "success" );
        } else if ( data.Population < 100 ) {
            $tr.addClass( "danger" );
        }
    },
    onComplete: function() {
        $eventsArea.show();
    }
});

// filters
dg4.datagrid( "filters", $eventsArea );