Datatable jQuery plugin example

This is an example using the Datatable jQuery plugin. This example shows record in a table with paging and search.

Access and work the example

In order to access this example, please access the url below or "jQuery DataTable UI" link from the top page.

http://localhost:8080/samples/gridtable/

Then the page below will appear.

You can do next operations.

  • Set number of records shown in this table, by selecting "Show entries"
  • Search fulltext search by inputing word into the "Search" text box
  • Paging by Next and Previous

top of this page

Implementation

This example is how to use one of the data table jQuery plugin.

The source code is in the "ALINOUS_HOME/samples/gridtable/" folder.

jQuery datatable plugin example folder

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

top of this page

Set up Html

At first, put the html code to apply JQuery datatable plugin.

In this code, by surrounding with div tag, set the width of datatable widget. And set header and footer in this table.

The tbody section is blank. The record will be loaded later.

top of this page

Load datatable plugin

The JavaScript in the "index.html" loads the datatable plugin. The source code is below.

In this script, set the url to get Json data into "/samples/gridtable/serverData.alns".

top of this page

Server side program

The source code to get JSon data of records is below.

In this script, it supports

  • Paging of the record
  • Full text search

The parameter "$IN.iDisplayStart" indicate the start position of the database record, and "$IN.iDisplayLength" does the limit of records in a page.

The "$IN.sSearch" is inputed word for full text search.

top of this page

Install script

This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/install.alns".

install script

The source code of the install script is below.


This script makes "ajax" table and insert demo data.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing Datatable example.



Go to Top