Skip to content
This repository has been archived by the owner on Dec 7, 2019. It is now read-only.

Table types

Vasiliy Zubach edited this page Sep 20, 2013 · 6 revisions

There are three types of tables in tTable.js:

  • Data driven table;
  • AJAX data driven table;
  • AJAX per page data driven table;

=====

Data driven table

Data driven table means that you've already have a data that you should pass to your table and it should works. So u just create you table config (titles, data, etc..) and everything should work.

=====

AJAX data driven table

AJAX Data driven table means that at the moment of table creation you don't have your data for table, and all the data will be get with AJAX request once. You only need to configure your ajax settings. You can specify them as simple jQuery ajax options in ajax property. There is only two important ajax properties on this step:

new tTable({
    // other config things
    ajax : {
        url: 'your_ajax_url.php?maybe=with&some=params', // url should be string
        prepare_data : function ( response ){ // prepare your data for tTable
            // response here is what your backend will return in AJAX request
            // you should prepare your data array in proper format for tTable.js
            return data;
        }
    }
});

=====

AJAX per page data driven table

AJAX per page data driven table means that at the moment of table creation you don't have your data for table, and the data for current page will be get with AJAX request. You only need to configure your ajax settings. You can specify them as simple jQuery ajax options in ajax property. There is only three important ajax properties on this step:

new tTable({
    // other config things
    ajax : {
        // url property should be function, that returns an url for getting specified page data.
        url : function ( from, limit, sort_by, sort_type, search, sensitive ){
            return 'php/ajax.php?limit=' + from + ',' + limit + '&sort_by=' + sort_by + '&sort_type=' + sort_type + '&search=' + search + '&sensitive=' + sensitive;
        },
        prepare_data : function ( response ){
            // response here is what your backend will return in AJAX request
            // you should prepare your data array in proper format for tTable.js
            return data;
        },
        full_size : function ( response ){
            // you should place information of your full table data size somewhere in your response and return in in this function
            return response.count;
        }
    }
});