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 exampleAccess and work the example
- Implementation
- Install script
- Testing automation
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
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.
Included jQuery files
This example uses css and JavaScript files of jQuery, listed below.
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.
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".
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.
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".
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.