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:

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.
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:
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

The result of the above code is:

[フレーム]