cms_table

jQuery Plugins

Samples
API Reference
Styling & Controls
Dependences

Server side
Simple
Ajax

Server side processing list sample

	No	ID	UID	Last	First	Mail	Country	City
Loading data from server

jQuery code snippet:


// create server side processing dataTable with jquery cms_table plugin
var sample_server_list = $("#sample-server-list").cms_table({
	api: '/cms/files/guide/jquery/api/usr/lst' // RESTful api URL address for dataTable server-side processing
});

HTML code snippet:


<div class="cms_dataTable">
	<table cellpadding="0" cellspacing="0" border="0" class="display" id="sample-server-list">
		<thead>
			<tr>
				<th class="sample-jquery-table-th-0"><input type="button" value="+" class="cms-display-select" style="font-size:14px"></th>
				<th class="sample-jquery-table-th-1">No</th>
				<th class="sample-jquery-table-th-2">ID</th>
				<th class="sample-jquery-table-th-3">UID</th>
				<th class="sample-jquery-table-th-4">Last</th>
				<th class="sample-jquery-table-th-5">First</th>
				<th class="sample-jquery-table-th-6">Mail</th>
				<th class="sample-jquery-table-th-7">Country</th>
				<th class="sample-jquery-table-th-8">City</th>
			</tr>
		</thead>
	</table>
</div>

API URL: "/cms/files/guide/jquery/api/usr/lst" returns JSON data:


{"draw":1,"recordsTotal":"11","recordsFiltered":"11","data":[["<input type=\"checkbox\">",1,"3","anba","Banducci","Annet","Banducci.Annet@mail.com","USA","Boston"],["<input type=\"checkbox\">",2,"1","anjo","Abela","John","Abela.John@mail.com","USA","Boston"],["<input type=\"checkbox\">",3,"7","clge","Georgas","Clark","Georgas.Clark@mail.com","UK","London"],["<input type=\"checkbox\">",4,"8","erha","Harding","Eric","Harding.Eric@mail.com","USA","Long Beach"],["<input type=\"checkbox\">",5,"4","gebr","Braun","George","Braun.George@mail.com","USA","Ashburn"],["<input type=\"checkbox\">",6,"2","hesm","Smith","Helmut","Helmut.Smith@mail.com","USA","New York"],["<input type=\"checkbox\">",7,"10","leko","Kolsrud","Lena","Kolsrud.Lena@mail.com","Germany","Berlin"],["<input type=\"checkbox\">",8,"5","micu","Cunningham","Michael","Cunningham.Michael@mail.com","Canada","Ottawa"],["<input type=\"checkbox\">",9,"6","niva","Vavilov","Nikolay","Vavilov.Nikolay@mail.com","Russia","Moscow"],["<input type=\"checkbox\">",10,"11","raja","Jankowski","Radoslaw","Jankowski.Radoslaw@mail.com","Poland","Warsaw"]],"return":[],"rc":"0","msg":"success"}

API URL page XML definition in pages.xml file:


<doc><url>/usr/lst</url><method>GET</method><fnc>sample_class::usrList</fnc></doc>

Full subsite (based on KUSoftas CMS) configuration and PHP code of sample RESTful API can be found in folder: /cms/files/guide/jquery/api (see using CMS tool "Files": http://www.kusoftas.com/cms/srv/admin/doc)

Simple list sample

	No	ID	UID	Last	First	Mail	Country	City

jQuery code snippet:


// create simple list dataTable with jquery cms_table plugin
var sample_simple_list = $("#sample-simple-list").cms_table({
	type: 'list', // type list
	options: {
		columnDefs: [
			{ width: "1%", targets: [0,1]}, // to be small width
			{ wisible: false, targets: [2] }, // set ivcisible table id column
			{ orderable: false, targets: [0,1,2] }, // make non sortable columns
		],
		autoWidth: false, // disable column auto width
		order: [[ 3, "asc" ]] // initial sorting column
	}
});
// user list
var usr_list = [
	["<input type=\"checkbox\"\/>",1,"3","anba","Banducci","Annet","Banducci.Annet@mail.com","USA","Boston"],
	["<input type=\"checkbox\"\/>",2,"1","anjo","Abela","John","Abela.John@mail.com","USA","Boston"],
	["<input type=\"checkbox\"\/>",3,"7","clge","Georgas","Clark","Georgas.Clark@mail.com","UK","London"],
	["<input type=\"checkbox\"\/>",4,"8","erha","Harding","Eric","Harding.Eric@mail.com","USA","Long Beach"],
	["<input type=\"checkbox\"\/>",5,"4","gebr","Braun","George","Braun.George@mail.com","USA","Ashburn"]
];
// add data from user_list to sample_simple_list
for (var i=1; i<=usr_list.length; i++) {
	sample_simple_list.DataTable().row.add(usr_list[i-1]);
}

HTML code snippet:


<div class="cms_dataTable sample-jquery-table">
	<table cellpadding="0" cellspacing="0" border="0" class="display" id="sample-simple-list">
		<thead>
			<tr>
				<th><input type="button" value="+" class="cms-display-select" style="font-size:14px"></th>
				<th>No</th>
				<th>ID</th>
				<th>UID</th>
				<th>Last</th>
				<th>First</th>
				<th>Mail</th>
				<th>Country</th>
				<th>City</th>
			</tr>
		</thead>
	</table>
</div>

Ajax list sample

	No	ID	UID	Last	First	Mail	Country	City

jQuery code snippet:


// create ajax list dataTable with jquery cms_table plugin
var sample_ajax_list = $("#sample-ajax-list").cms_table({
	type: 'list', // type list
	options: {
		columnDefs: [
			{ width: "1%", targets: [0,1]}, // to be small width
			{ wisible: false, targets: [2] }, // set invisible table id column
			{ orderable: false, targets: [0,1,2] }, // make non sortable columns
		],
		autoWidth: false, // disable column auto width
		order: [[ 3, "asc" ]], // initial sorting column
		ajax: 'http://' + window.location.host + '/cms/files/guide/jquery/api/usr/get' // RESTful api URL address for dataTable Ajax source
	}
});

HTML code snippet:


<div class="cms_dataTable">
	<table cellpadding="0" cellspacing="0" border="0" class="display" id="sample-ajax-list">
		<thead>
			<tr>
				<th><input type="button" value="+" class="cms-display-select" style="font-size:14px"></th>
				<th>No</th>
				<th>ID</th>
				<th>UID</th>
				<th>Last</th>
				<th>First</th>
				<th>Mail</th>
				<th>Country</th>
				<th>City</th>
			</tr>
		</thead>
	</table>
</div>

API URL: "/cms/files/guide/jquery/api/usr/get" returns JSON data:


{"data":[["<input type=\"checkbox\" \/>",1,"1","anjo","Abela","John","Abela.John@mail.com","USA","Boston"],["<input type=\"checkbox\" \/>",2,"2","hesm","Smith","Helmut","Helmut.Smith@mail.com","USA","New York"],["<input type=\"checkbox\" \/>",3,"3","anba","Banducci","Annet","Banducci.Annet@mail.com","USA","Boston"],["<input type=\"checkbox\" \/>",4,"4","gebr","Braun","George","Braun.George@mail.com","USA","Ashburn"],["<input type=\"checkbox\" \/>",5,"5","micu","Cunningham","Michael","Cunningham.Michael@mail.com","Canada","Ottawa"],["<input type=\"checkbox\" \/>",6,"6","niva","Vavilov","Nikolay","Vavilov.Nikolay@mail.com","Russia","Moscow"],["<input type=\"checkbox\" \/>",7,"7","clge","Georgas","Clark","Georgas.Clark@mail.com","UK","London"],["<input type=\"checkbox\" \/>",8,"8","erha","Harding","Eric","Harding.Eric@mail.com","USA","Long Beach"],["<input type=\"checkbox\" \/>",9,"9","sthr","Harrison","Stephen","Harrison.Stephen@mail.com","USA","Las Vegas"],["<input type=\"checkbox\" \/>",10,"10","leko","Kolsrud","Lena","Kolsrud.Lena@mail.com","Germany","Berlin"],["<input type=\"checkbox\" \/>",11,"11","raja","Jankowski","Radoslaw","Jankowski.Radoslaw@mail.com","Poland","Warsaw"]]}

API URL page XML definition in pages.xml file:


<doc><url>/usr/get</url><method>GET</method><fnc>sample_class::usrGet</fnc></doc>

.cms_table()

Option	Method	Callback
type	load
nColumnIndex
api
options
messages

.cms_table( [settings] )

Returns: dataTable()

Description: dataTable plugin adoption for use in CMS

.cms_table( [settings] )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_table() plugin. All settings are optional.
  - - type (default: server side processing)
    - Type: Integer
    - Table type:
      - type: 'list' - simple list
      - default - server side processing list
  - - nColumnIndex (default: 1)
    - Type: Integer
    - Table indexing column number.
  - - api (depends on type: default)
    - Type: String
    - Server side processing dataTable object option sAjaxSource URL.
  - - messages
    - Type: PlainObject
    - A set of key/value pairs that defines messages. All settings are optional:
      - Clear
        
        Type: String
        
        Filtering clear button title. Defaults:
        
        {messages: {'Clear': 'Clear'}}
  - - options
    - Type: PlainObject
    - A set of key/value pairs that configure the dataTable() plugin. All settings are optional.
      Settings injected by cms_table plugin:
      - sDom
        
        Type: String
        
        This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table).
        
        sDom: '<"cms_table_top"if><"cms_table_mid"rt><"cms_table_bot"lp>'
      - oLanguage
        
        Type: PlainObject
        
        The language information presented by DataTables can be completely altered for internationalisation (or localisation) using the properties of the oLanguage object.
        
        oLanguage: { "oPaginate": {"sPrevious": "Prev"}, "sInfo": "_START_ to _END_ of _TOTAL_", "sInfoEmpty": "No entries to show" }
      - aoColumnDefs
        
        Type: Array
        
        This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array.
        
        Case of type: 'list':
        
        aoColumnDefs: [ { "sWidth": "1%", "aTargets": [ 0 ]}, // to be small width row sequence column { "bSortable": false, "aTargets": [0,1] } // no sort (row sequence number) ]
        
        Case of type: default:
        
        aoColumnDefs: [ { "sWidth": "1%", "aTargets": [ 0 ]}, // to be small width { "bVisible": false, "aTargets": [2] }, // no show (id - only for internal use) { "bSortable": false, "aTargets": [0,1] } // no sort (row sequence number) ]
      - aaSorting
        
        Type: Array
        
        The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc').
        
        Case of type: 'list':
        
        "aaSorting": [[ 2, "asc" ]]
        
        Case of type: default:
        
        "aaSorting": [[3,'asc']]
      - bAutoWidth (depends on type: default)
        
        Type: Boolean
        
        Disable automatic column width calculation.
        
        "bAutoWidth": false
      - aLengthMenu (depends on type: default)
        
        Type: Array
        
        Allows you to specify the entries in the length drop down menu that DataTables shows when pagination is enabled.
        
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] // add "All" to allow disable pagination
      - bProcessing (depends on type: default)
        
        Type: Boolean
        
        Enable the display of a 'processing' indicator when the table is being processed.
        
        "bProcessing": true
      - bServerSide (depends on type: default)
        
        Type: Boolean
        
        Configure DataTables to use server-side processing.
        
        "bServerSide": true
      - sAjaxSource (depends on type: default)
        
        Type: String
        
        Configure DataTables to use server-side processing.
        
        "sAjaxSource": 'http://' + window.location.host + api // AJAX API function URL
      - fnServerData (depends on type: default)
        
        Type: Function
        
        Allows you to override the default function which obtains the data from the server ($.getJSON).
        
        Function handle sorting when [2] column (tabe id column) is hidden and handle DB data reading errors.
      - fnDrawCallback
        
        Type: Function
        
        This function is called on every 'draw' event, and allows you to dynamically modify any aspect you want about the created DOM.
        
        Function restore all input selection botton to state "+".
      - fnInitComplete
        
        Type: Function
        
        Called when the table has been initialised.
        
        Function add filter clear button.

.cms_table( 'load', data)

Returns: dataTable()

- load
- Type: String,
- Load data to table dataTable() object from data array
- Returns dataTable() object table.
- - data
  - Type: Array
  - Array of arrays of data.

There are a number of ways in which DataTables allows you to style tables:

Basic styling - DataTables will add a number of elements to the page, each with a suitable default ID and/or class to allow CSS selectors to address the element. You can take the demo CSS and customise this to what you require.
Custom classes - You can customise the class names that DataTables applied to elements in order to match the style-sheets you already have on your web-site.
ThemeRoller support - The jQuery UI team have done an outstanding job of providing a consistent set of CSS rules, which results in their excellent ThemeRoller tool, allowing you to completely change the look and feel of your UI widgets with minimal effort. DataTables offers full support for ThemeRoller.
ThemeForest Themes - Pre-built HTML and CSS templates with DataTables support, to provide your interface with a unified look and feel.

More detailed information about dataTable styling you can find at site http://datatables.net/styling

cms_table plugin has its own additional elements for styling and control:

class 'cms_table_top' - dataTable header styling class
class 'cms_table_bot' - dataTable footer styling class
class 'cms-form-submit' - filter clear button styling class

Plugin cms_table depends on following jQuery packages:

User ID:
User Password: