jui_datagrid demo

Click any row to select or deselect it. Use sorting button to apply multi-column sorting. Click and drag to re-arrange sorting rules.

Use preferences button to show or hide columns. Click and drag any column to change its position in data table. Use filters button to display filters dialog.

Easily navigate pages from pagination section using links or the slider. Go directly to any page or set rows per page.

Apply more than 30 themes on the fly using 'Select theme'. See official jQuery UI themes and Wijmo theming.

Get the code from [Code ] tab.

<!--  It is a good idea to bundle all CSS in one file. The same with JS -->

<!--  JQUERY -->
<script type="text/javascript" src="/path/to/jquery.min.js"></script>

<!--  JQUERY-UI -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery-ui.min.css">
<script type="text/javascript" src="/path/to/jquery-ui.min.js"></script>
<!--  if timepicker is used in filters -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery-ui-timepicker-addon.min.css"/>
<script type="text/javascript" src="/path/to/jquery-ui-timepicker-addon.min.js"></script>
<!--  if touch event support is needed (mobile devices) -->
<script type="text/javascript" src="/path/to/jquery.ui.touch-punch.min.js"></script>

<!--  DROPDOWN plugin -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_dropdown.min.css">
<script type="text/javascript" src="/path/to/jquery.jui_dropdown.min.js"></script>

<!--  PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_pagination.min.css">
<script type="text/javascript" src="/path/to/jquery.jui_pagination.min.js"></script>
<script type="text/javascript" src="/path/to/jui_pagination/localization/en.min.js"></script>

<!--  FILTERS plugin --> 
<link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_filter_rules.min.css">
<script type="text/javascript" src="/path/to/jquery.jui_filter_rules.min.js"></script>
<script type="text/javascript" src="/path/to/jui_filter_rules/localization/en.min.js"></script>
<!--  required from filters plugin -->
<script type="text/javascript" src="/path/to/bowser.min.js"></script>
<script type="text/javascript" src="/path/to/moment.min.js"></script>

<!--  DATAGRID plugin -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_datagrid.min.css">
<script type="text/javascript" src="/path/to/jquery.jui_datagrid.min.js"></script>
<script type="text/javascript" src="/path/to/jui_datagrid/localization/en.min.js"></script>
<!--  Just create a div and give it an ID -->

<div id="demo_grid1"></div>
$(function() {

    $("#demo_grid1").jui_datagrid({

        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: "no", "header": 'Email', "headerClass": "th_email", "dataClass": "td_email"},
            {field: "gender", visible: "yes", "header": 'Gender', "headerClass": "th_gender", "dataClass": "td_gender"},
            {field: "date_of_birth", visible: "yes", "header": 'Date of birth', "headerClass": "th_date_of_birth", "dataClass": "th_date_of_birth",
                column_value_conversion: {
                    function_name: "date_decode",
                    args: [
                        {"col_index": 5},
                        {"value": "DD/MM/YYYY"}
                    ]
                }
            },
            {field: "date_updated", visible: "yes", "header": 'Date updated', "headerClass": "th_date_updated", "dataClass": "th_date_updated",
                column_value_conversion_server_side: {
                    function_name: "UTC_timestamp_to_local_datetime",
                    args: [
                        {"col_index": 6},
                        {"value": "Europe/Athens"},
                        {"value": "d/m/Y H:i:s"}
                    ]
                }
            }
        ],

        sorting: [
            {sortingName: "Code", field: "customer_id", order: "none"},
            {sortingName: "Lastname", field: "lastname", order: "ascending"},
            {sortingName: "Firstname", field: "firstname", order: "ascending"},
            {sortingName: "Date of birth", field: "date_of_birth", order: "none"},
            {sortingName: "Date updated", field: "date_updated", order: "none"}
        ],

        filterOptions: {
            filters: [
                {
                    filterName: "Lastname", "filterType": "text", field: "lastname", filterLabel: "Last name",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {"type": "text"}
                        }
                    ]
                },
                {
                    filterName: "Firstname", "filterType": "text", field: "firstname", filterLabel: "First name",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {"type": "text"}
                        }
                    ]
                },
                {
                    filterName: "Gender", "filterType": "number", "numberType": "integer", field: "lk_genders_id", filterLabel: "Gender",
                    excluded_operators: ["equal", "not_equal", "less", "less_or_equal", "greater", "greater_or_equal"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {type: "checkbox"}
                        }
                    ],
                    lookup_values: [
                        {lk_option: "Male", lk_value: "1"},
                        {lk_option: "Female", lk_value: "2", lk_selected: "yes"}
                    ]
                },
                {
                    filterName: "DateOfBirth", "filterType": "date", field: "date_of_birth", filterLabel: "Date of birth",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {
                                type: "text",
                                title: "Set the date using format: dd/mm/yyyy"
                            },
                            filter_widget: "datepicker",
                            filter_widget_properties: {
                                dateFormat: "dd/mm/yy",
                                changeMonth: true,
                                changeYear: true
                            }
                        }
                    ],
                    validate_dateformat: ["DD/MM/YYYY"],
                    filter_value_conversion_server_side: {
                        function_name: "date_encode",
                        args: [
                            {"filter_value": "yes"},
                            {"value": "d/m/Y"}
                        ]
                    }
                },
                {
                    filterName: "DateUpdated", "filterType": "date", field: "date_updated", filterLabel: "Datetime updated",
                    excluded_operators: ["in", "not_in"],
                    filter_interface: [
                        {
                            filter_element: "input",
                            filter_element_attributes: {
                                type: "text",
                                title: "Set the date and time using format: dd/mm/yyyy hh:mm:ss"
                            },
                            filter_widget: "datetimepicker",
                            filter_widget_properties: {
                                dateFormat: "dd/mm/yy",
                                timeFormat: "HH:mm:ss",
                                changeMonth: true,
                                changeYear: true,
                                showSecond: true
                            }
                        }
                    ],
                    validate_dateformat: ["DD/MM/YYYY HH:mm:ss"],
                    filter_value_conversion: {
                        function_name: "local_datetime_to_UTC_timestamp",
                        args: [
                            {"filter_value": "yes"},
                            {"value": "DD/MM/YYYY HH:mm:ss"}
                        ]
                    }
                }
            ],

            decimal_separator: "."
        },

        ajaxFetchDataURL: 'ajax_fetch_page_data.php',
        row_primary_key: 'customer_id',

        containerClass: 'grid1_container ui-state-default ui-corner-all',
        datagridClass: 'grid1_data ui-widget-content',

        caption: 'Customers',

        showExportButton: false,
        showPrintButton: false,

        debug_mode: "yes",

        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);
        },
        onDatagridError: function(event, data) {
            log = 'ERROR: ' + data.err_description + ' (' + data.err_code + ').';
            create_log(elem_dlg_log1, log, true);
            if(data.hasOwnProperty("elem_filter")) {
                data.elem_filter.focus();
            }
        },
        onDebug: function(event, data) {
            create_log(elem_dlg_log1, data.debug_message, false, true);
        },
        onChangeSelectedRows: function() {
            // jQueryUI-bootstrap CSS fix
            var elem_jui_dropdown_launcher_span = $('#' + $("#demo_grid1").jui_datagrid('getDropdownLauncherID') + ' span');
            elem_jui_dropdown_launcher_span.addClass('juib_fix');
        },
        onDisplay: function() {
            // jQueryUI-bootstrap CSS fix
            var elem_jui_dropdown_launcher_span = $('#' + $("#demo_grid1").jui_datagrid('getDropdownLauncherID') + ' span');
            elem_jui_dropdown_launcher_span.addClass('juib_fix');

            log = 'Datagrid created.';
            create_log(elem_dlg_log1, log);
        }
    });

});
<?php
require_once '/path/to/jui_filter_rules.php';
require_once '/path/to/jui_datagrid.php';

// connect to database (MYSQLi)
$conn = new mysqli('db_server', 'db_user', 'db_passwd', 'db_name');
if($conn->connect_error) {
	echo 'Database connection failed: ' . $conn->connect_error;
	exit;
}
$conn->set_charset('utf8');

$db_settings = array(
	'rdbms' => 'MYSQLi',
	'use_prepared_statements' => true,
	'pst_placeholder' => 'question_mark',
	'db_conn' => $conn,
);

$page_settings = array(
	"selectCountSQL" => "SELECT count(id) as totalrows FROM customers",
	"selectSQL" => "SELECT c.id as customer_id, c.lastname, c.firstname, c.email, g.gender, c.date_updated, c.date_of_birth
	                FROM customers c INNER JOIN lk_genders g ON (c.lk_genders_id = g.id)",
	"page_num" => $_POST['page_num'],
	"rows_per_page" => $_POST['rows_per_page'],
	"columns" => $_POST['columns'],
	"sorting" => isset($_POST['sorting']) ? $_POST['sorting'] : array(),
	"filter_rules" => isset($_POST['filter_rules']) ? $_POST['filter_rules'] : array()
);

$jdg = new jui_datagrid($db_settings, $page_settings, $_POST['debug_mode'] == "yes" ? true : false);
echo json_encode($jdg->get_page_data());

Check out bs_grid

bs_grid New

A Bootstrap compatible datagrid plugin (bs_grid) is available.

Demo SQL code

SQL of this demo is available here (MySQL).