The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jui_datagrid : jquery datagrid plugin

Tags :

Plugin rate :

jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

Copyright Christos Pontikis
Requires jquery, jquery-ui, jui_dropdown, jui_pagination, jui_filter_rules plugins

Release: 0.9.0 (29 Jan 2013)

License MIT

Project page

http://pontikis.net/labs/jui_datagrid

Demo

http://pontikis.net/labs/jui_datagrid/demo

Documentation

http://pontikis.net/labs/jui_datagrid/docs

Support Forum

http://pontikis.net/bbs

Implementation: 

HTML (head section)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link rel="stylesheet" href="/path/to/jqueryui_theme/jquery-ui.css">
<link rel="stylesheet" href="/path/to/jquery.jui_dropdown.css">
<link rel="stylesheet" href="/path/to/jquery.jui_pagination.css">
<link rel="stylesheet" href="/path/to/jquery.jui_filter_rules.css">
<link rel="stylesheet" href="/path/to/jquery.jui_datagrid.css">
<!--  IF CUSTOM CLASSES USED -->
<link rel="stylesheet" href="/path/to/custom.css">
 
<script type="text/javascript" src="/path/to/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jquery-ui.js" type="text/javascript"></script>
 
<!--  IF TOUCH EVENT SUPPORT FOR TOUCH DEVICES IS NEEDED (SEE FOLDER /LIB) -->
<script src="/path/to/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
 
<script type="text/javascript" src="/path/to/jquery.jui_dropdown.min.js" type="text/javascript"></script>
 
<script type="text/javascript" src="/path/to/jquery.jui_pagination.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jui_pagination/localization/en.js" type="text/javascript"></script>
 
<script type="text/javascript" src="/path/to/jquery.jui_filter_rules.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jui_filter_rules/localization/en.js" type="text/javascript"></script>
 
<script type="text/javascript" src="/path/to/jquery.jui_datagrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jui_datagrid/localization/en.js" type="text/javascript"></script>

JS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$("#element_id").jui_datagrid({
    ajaxFetchDataURL: 'ajax/ajax_fetch_data1.php',
    caption: 'Customers',
 
    columns: [
        {field: "customer_id", visible: "no", "header": 'Code', "headerClass": "th_code", "dataClass": "td_code"},
        {field: "lastname", visible: "yes", "header": 'Lastname', "headerClass": "th_lastname", "dataClass": "td_lastname"},
        {field: "firstname", visible: "yes", "header": 'Firstname', "headerClass": "th_firstname", "dataClass": "td_firstname"},
        {field: "email", visible: "yes", "header": 'Email', "headerClass": "th_email", "dataClass": "td_email"},
        {field: "gender", visible: "yes", "header": 'Gender', "headerClass": "th_gender", "dataClass": "td_gender"}
    ],
 
    sorting: [
        {"sortingName": "Code", field: "customer_id", order: "none"},
        {"sortingName": "Lastname", field: "lastname", order: "ascending"},
        {"sortingName": "Firstname", field: "firstname", order: "ascending"}
    ],
 
    ajaxFetchDataURL: 'ajax/ajax_fetch_data1.php',
 
    containerClass: 'grid1_container ui-state-default ui-corner-all',
    datagridClass: 'grid1_data ui-widget-content',
 
    autoSetColumnsWidth: false,
 
    paginationOptions: {
        sliderAnimation: false
    }
 
    onDelete: function() {
        var a_sel = $(this).jui_datagrid("getSelectedIDs"),
            sel = a_sel.length;
        if(sel == 0) {
            log = 'Nothing selected...';
            create_log(elem_dlg_log1, log);
        } else {
            log = sel + ' Row(s) with ID: ' + a_sel + ' will be deleted.';
            create_log(elem_dlg_log1, log);
        }
    },
    onCellClick: function(event, data) {
        log = 'Click on cell: col ' + data.col + ' row ' + data.row + '.';
        create_log(elem_dlg_log1, log);
    },
    onRowClick: function(event, data) {
        log = 'Row with ID ' + data.row_id + ' ' + data.row_status + '.';
        create_log(elem_dlg_log1, log);
    },
    onDisplay: function() {
        log = 'Datagrid created.';
        create_log(elem_dlg_log1, log);
    }
 
});

JSON data structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "total_rows": "200",
    "page_data": [
        {
            "id": "111",
            "lastname": "Diaz",
            "firstname": "Kai",
            "email": "odio.Aliquam@Phasellus.org",
            "gender": "female"
        },
        {
            "id": "112",
            "lastname": "Snider",
            "firstname": "Nelle",
            "email": "vulputate@nonlobortis.org",
            "gender": "female"
        },
        ...
    ]
}

Options: 
ajaxFetchDataURL
String
the url to ajax script which fetches data
caption
String
grid caption
columns
Array
the columns to display - see above example and documentation
sorting
Array
the sorting rules to apply - see above example and documentation
filterOptions
Array
the filter rules to apply - see above example and documentation
pageNum
Integer
Default : 1 - start page to display
rowsPerPage
Integer
Default : 10 - rows per page
maxRowsPerPage
Integer
Default : 100 - max rows per page
row_primary_key
String
the promary key fieldname (usually "id") - not required but highly recommended
rowSelectionMode
String
Default : multiple - row selection mode: one of 'MULTIPLE', 'SINGLE', 'FALSE'
autoSetColumnsWidth
Boolean
Default : true - automatic set columns width
showRowNumbers
Boolean
Default : false - show row index (as first column)
showSortingIndicator
Boolean
Default : true - show sorting indicator in column header
Methods: 
getSelectedIDs
Function
Returns : array - get selected IDs
getGridElemTableID
Function
Returns : string - get the ID of grid table
getGridElemHeaderTableID
Function
Returns : string - get the ID of grid header table
setPageColClass
Function
set column class
removePageColClass
Function
remove column class
getPaginationOption
Function
get the value of a pagination option
getAllPaginationOptions
Function
Returns : array - get the value of all pagination options
Screenshots
  • jui_datagrid

  • jui_datagrid preferences

  • jui_datagrid sorting

Comments

its not working

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
jQuery U.I
>= 1.8
Current version
0.9.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]