KUSoftas CMS
Responsive design
Demo User

Download

Last stable v 5.2 2024-11-01

    cms_table

    jQuery Plugins
    cms_dual_tree
    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>

    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)

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

    © KUSoftas CMS 2014 - 2024. All rights reserved. Site is running on KUSoftas CMS.