jquery.datagrid

jquery.datagrid is a jquery plugin to render datagrid. Works with local or remote data. Designed to be adaptive, simple to use and extendable.

• Fetch data from any source: local data or remote data (using ajax, deferred function or plugin)
• Render a simple HTML Table easy to style (no imposed css)
• Simple columns definition
• Semi-automatic sorter and pager (for remote data, you need to code server side)
• Plugins for cell, pager and sorter renderers (easy to create, very easy to extend)
• Events on each step (you do what you want with your data)
• Convert form elements (input, select) into automatic filters (magic!)
sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: github.com

1. INCLUDE CSS AND JS FILES

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../jquery.datagrid.js"></script>
<script type="text/javascript" src="../plugins/jquery.datagrid.bootstrap3.js"></script>

2. HTML

<div id="dg-demo-static-data" class="dg"></div>

3. JAVASCRIPT

var dgs = $( "#dg-demo-static-data" ).datagrid({
		data: countries,
		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
		}],
		attr: { "class": "table table-bordered table-condensed" },
		sorter: "bootstrap",
		pager: "bootstrap",
		paramsDefault: {paging:20}
});

4. OPTIONS

// All options with default values
{
    source: "default", // plugin
    url: "",
    data: false,
    autoload: true,
    paramsDefault: {},
    paramsMapping: {
        page: "page",
        paging: "paging",
        orderby: "orderby",
        direction: "direction"
    },
    parse: function( data ) {
        if ( $.type( data ) === 'string' ) {
            return JSON.parse( data );
        } else {
            return data;
        }
    },
    col: [],
    attr: {},
    attrSortable: {},
    noData: "no data",
    onBefore: false,
    onData: false,
    onRowData: false,
    onComplete: false,
    sorter: "default", // plugin
    pager: "default", // plugin
    pagerPosition: "bottom"
}

Options detail

List of option names ( expected values )

Get data

• source ( string || object || function ) : data fetching method: function, plugin name (string) or plugin name with config (object). - see Source Plugins below
• url ( string ) : server url where data are fetch (with POST params data). Used by defaultsource.
• data ( false || array ) : local data (no remote fetch). If not false, source will be automatically set to "data".
• autoload ( boolean ) : auto load data. If set to false, you need to load manualy the data withdatagrid.fetch() method.
• paramsDefault ( object ) : default params added to the data request.
• paramsMapping ( object ) : you can map param names used for paging and sorting (keys used: see default value).
• parse( function ) : callback function that parse data before render. By default, decode data inJSON if data is a string.

Render data

• col ( array ) : array of column definition objects. - see Column options below
• attr ( false || object ) : an object of attribute-value pairs: generate the table element attributes.
• attrSortable ( false || object ) : an object of attribute-value pairs: params for $(th).attr() if column is sortable.
• noData ( string || function ) : string: it will be displayed instead of the table if there is no data.function: the result returned by the function will be displayed.

Plugins

• sorter ( string || object ) : display text or icon on table header when columns are sorted (asc or desc). - see Plugins below
• pager ( string || object ) : render the pager. default pager write page numbers in a span, all in adiv. - see Plugins below
• pagerPosition ( false || "top" || "bottom" || ["top","bottom"] ) : display the pager on "bottom" of thetable, or on the "top", or both with ["top","bottom"].

Events

• onBefore ( false || function ) : callback function(). Scope is datagrid.
• onData ( false || function ) : callback function( { "total": Total number of data without paging, "data": [ Array of row ] } )
• onRowData ( false || function ) : callback function( data[ numrow ], numrow, $tr )
• onComplete ( false || function ) : callback function(). Scope is datagrid.

Columns

Column options

// All column options with default values
{
    field: "",          // Field name
    title: "",          // Title display in the `th`content
    attrHeader: {},     // Param for `$(th).attr()`
    attr: {},           // Param for `$(td).attr()`
    sortable: false,    // `true` activate column sort on `th` click
    render: "default"   // *see cell rendering below*
}

Cell Rendering

How to display td content depends on column render value.

• Use a plugin registered with "plugin-name" ("default" plugin just display field value)

render: "plugin-name"

• Use a registered plugin "plugin-name" with params

render: { "plugin-name": params }

• Use a callback function

render: function( data ){
    // scope (this) is the `$(td)` in the callback
    // fill `td` with `$(td).html( returned value )`
    return data.value;

    // if you return false, `td` content will not be changed
    // you can update cell with `this.html()`, `this.append()`, ...
    this.html( data.value );
    return false;

    // `data` is an object like this
    data = {
        value: "the value of the field key",
        field: "the field key name",
        row: "row data object (row.fieldname = value)", 
        colindex: "column number (first is 0)"
    }
}

5. METHODS

Methods can be called in 2 ways:

• With selector used to create datagrid

$( selector ).datagrid( "methodName", methodParams );

• Or with a reference to the datagrid instance

datagrid.methodName( methodParams );

You can get a reference to the datagrid instance with

$( selector ).datagrid( "datagrid" );

// it's chainable
$( selector ).datagrid( "datagrid" ).methodName( methodParams );

Methods list

// fetch source (get data). `filters` is an object of attribute-value pairs (optional).
$( selector ).datagrid( "fetch", filters );

// get page number (first page is 1).
$( selector ).datagrid( "page" );
// set page number. `fetch()` is not called.
$( selector ).datagrid( "page", page );

// get paging number (default paging is 15).
$( selector ).datagrid( "paging" );
// set paging number. `fetch()` is not called.
$( selector ).datagrid( "paging", paging );

// get orderby (default orderby is "").
$( selector ).datagrid( "orderby" );
// set orderby. `fetch()` is not called.
// sorter plugin use field name.
$( selector ).datagrid( "orderby", orderby );

// get direction (default direction is "").
$( selector ).datagrid( "direction" );
// set direction. `fetch()` is not called.
// sorter plugin use "asc" or "desc".
$( selector ).datagrid( "direction", direction );

// get params used for data request.
$( selector ).datagrid( "params" );
// reset params to default.
$( selector ).datagrid( "reset" );

// render HTML table.
$( selector ).datagrid( "render", data );

// define selected form element(s) (and children) as automatic filters. *see __Filters__ below*
$( selector ).datagrid( "filters", selector );