Documentation

Getting Started

jqxDataTable is a lightweight jQuery Table widget built to easily replace your HTML Tables. It can read and display the data from your HTML Table, but it can also display data from various data sources like XML, JSON, Array, CSV or TSV. jqxDataTable comes with easy to use APIs and works across devices and browsers.

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxDataTable widget requires the following files: 

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
jqxDataTable uses jQuery for basic JavaScript tasks like elements selection and events handling. You need to include the jQuery javascript file, the jQWidgets core framework file - jqxcore.js, the jQWidgets data binding file - jqxdata.js, the main jqxDataTable plug-in file - jqxdatatable.js file, the jQWidgets Scrollbar plug-in - jqxbutton.js and jqxscrollbar.js(used for the DataTable scrolling), jQWidgets DropDownList plug-in(used in the DataTable's Pager and Filtering panel) - jqxlistbox.js and jqxdropdownlist.js, and the base jQWidgets stylesheet - jqx.base.css:

The next step is to create a DIV element within the body of the html document in case you will not initialize jqxDataTable from an existing HTML Table element. 
<div id="dataTable">
</div>

The last step is to initialize the widget. In order to initialize the DataTable, you need to set its source and columns properties. Add the following script to the html document: 
$("#dataTable").jqxDataTable(
{
    source: dataAdapter,
    columns: [
        { text: 'First Name', dataField: 'First Name', width: 100 },
        { text: 'Last Name', dataField: 'Last Name', width: 100 },
        { text: 'Product', dataField: 'Product', width: 180 },
        { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
        { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
    ]
});

To set a property(option), you need to pass the property name and value(s) to the jqxDataTable's constructor. 
$("#dataTable").jqxDataTable({ disabled: true});
To get a property(option), you need to pass the property name to the jqxDataTable's constructor. 
 var disabled = $("#dataTable").jqxDataTable('disabled');
To call a function, you need to pass the function name and parameters(if any). 
$("#dataTable").jqxDataTable('selectRow', 1);
To attach an event handler function to the jqxDataTable widget, you can use the jQuery's .on() method. Let’s suppose that you want to write code which does something when the user selects a row. The example code below demonstrates how to bind to the ‘rowSelect’ event of jqxDataTable. 
$("#dataTable").on('rowSelect', function (event) {
    // event arguments
    var args = event.args;
    // row index
    var index = args.index;
    // row data
    var rowData = args.row;
    // row key
    var rowKey = args.key;
});
Most of the browser events bubble from the element(the event target) where they occur up to the body and the document element. By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. An event handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)

The code sample below illustrates how to stop the rowSelect event from bubbling using the .stopPropagation() method. 
$("#dataTable").on('rowSelect', function (event) {
    // event arguments
    var args = event.args;
    // row index
    var index = args.index;
    // row data
    var rowData = args.row;
    // row key
    var rowKey = args.key;
        
    event.stopPropagation();
});

Basic DataTable Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of jqxDataTable. jqxDataTable is built to easily replace your HTML Tables. It can read and display the data from your HTML Table, but it can also display data from different data sources like XML, JSON, Array, CSV or TSV.
    </title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#dataTable").jqxDataTable(
            {
                altRows: true,
                sortable: true,
                columns: [
                  { text: 'First Name', dataField: 'First Name', width: 100 },
                  { text: 'Last Name', dataField: 'Last Name', width: 100 },
                  { text: 'Product', dataField: 'Product', width: 180 },
                  { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                  { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <table id="dataTable" border="1">
        <thead>
            <tr>
                <th align="left">First Name</th>
                <th align="left">Last Name</th>
                <th align="left">Product</th>
                <th align="right">Price</th>
                <th align="right">Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ian</td>
                <td>Devling</td>
                <td>Espresso Truffle</td>
                <td>$1.75</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Wilson</td>
                <td>Cappuccino</td>
                <td>$5.00</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Cheryl</td>
                <td>Nodier</td>
                <td>Caffe Americano</td>
                <td>$2.50</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Martin</td>
                <td>Saavedra</td>
                <td>Caramel Latte</td>
                <td>$3.80</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Guylene</td>
                <td>Bjorn</td>
                <td>Green Tea</td>
                <td>$1.50</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Andrew</td>
                <td>Burke</td>
                <td>Caffe Espresso</td>
                <td>$3.00</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Regina</td>
                <td>Murphy</td>
                <td>White Chocolate Mocha</td>
                <td>$3.60</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>Murphy</td>
                <td>Caramel Latte</td>
                <td>$3.80</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Petra</td>
                <td>Bein</td>
                <td>Caffe Americano</td>
                <td>$2.50</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Nodier</td>
                <td>Caffe Latte</td>
                <td>$4.50</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Devling</td>
                <td>Green Tea</td>
                <td>$1.50</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Beate</td>
                <td>Saylor</td>
                <td>Espresso con Panna</td>
                <td>$3.25</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Shelley</td>
                <td>Nodier</td>
                <td>Peppermint Mocha Twist</td>
                <td>$4.00</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Murphy</td>
                <td>Peppermint Mocha Twist</td>
                <td>$4.00</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Lars</td>
                <td>Wilson</td>
                <td>Caffe Espresso</td>
                <td>$3.00</td>
                <td>11</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

The result of the above code is: