I am using Data table's Server side processing feature to process a huge set of data - load around 10000 records. I have done as per the example . But I am struggling with the server side logic.how do I dynamically send parameters to server side , to fetch the data. i see the parameter options, but I dont understand how to use them.Is there any example available how to send the parameters dynamically. e.g If I am clicking on Page 4 , how do I tell the server to fetch records from 40 to 50

Hi, looking for help binding json object array coming from server side, after executing this I get empty table ("No data available in table" message) and total and filtered in footer are 0.

this is json coming from server side, "var json" declaration here is only to show array structure, there is no such declaration in real code.

var json = {
    "draw": 1,
    "recordsTotal": 4,
    "recordsFiltered": 4,
    "Visits":
        [
            { "Name": "Joe Doe", "Email": "joe@gmail.com", "Phone": "1-800-JOE-DOE"},
            { "Name": "Jane Doe", "Email": "jane@gmail.com", "Phone": "1-800-JANE-DOE" }
        ]
  
}

this is binding script, just one of the failed versions, so I know it is wrong but picked is the only version where I dont get any js errors in console, just empty table. I tried all possible ways I can think of to tell datatable where in the array the data is. I am using dataSrc because I would need to pre-process json result at some point.

 var table= $('#' + "tableVisits");
      
           
            table.dataTable({
                processing: true,
                serverSide: true,
                bRetrieve: true,

                ajax: {
                    url: "/admin/visits/list",
                    type: "POST",
                    dataSrc: function (json) {return json; }
                },
                columns: [
                    { data: "Visits.Name"},
                    { data: "Visits.Email"},
                    { data: "Visits.Phone"}
                ]

            });

and this is html

<table id="tableVisits">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </tfoot>

</table>

I'm using scroller 1.2.2 with datatables 1.10.

When I scroll down and the next batch starts loading, any micro-scrolls after that will create a new request to the server whether I use deferRender or serverWait (undesirable). I can't seem to tune it properly so that it is NOT continually requesting chunks while unneeded scrolling is occuring during a load.

It's the same problem as https://datatables.net/forums/discussion/17514/scroller-too-often-server-side-call-when-scroll-to-top, but displayBuffer does not solve the issue.

Any thoughts?

<script type="text/javascript">
    $(document).ready(function() {
        var dtable = $('#example').dataTable( {
            autoWidth : true,
            order : [ 0, "desc" ],
            processing : true,
            paging : true,
            dom: "frtiS",
            scrollY : 500,
                    serverSide : true,
            stateSave : false,
            stateDuration : 120,
            ajax : "xxxxxxxxxxxxxxxxxx",
            "rowCallback": function( row, data ) {
                       row.setAttribute('id', data[0]);
                },
            scroller: {
                displayBuffer: 5
            },
            columnDefs : [
                {targets : [0], visible : false, searchable : true},
                // name
                {targets : [1], width : "20%", 
                    render: function ( data, type, row ) {
                        return '<span class="org_name">'+data+'</span><br>'+row[4];
                        }
                    },
                // actions
                {targets : [2], width : "5%", orderable : false, className : "alignverticalmiddle center"},
                // contact
                {targets : [3], width : "15%", orderable : false, className : "breakword"},
                {targets : [4], visible : false, orderable : false},
                // plan
                {targets : [5], width : "7%", orderable : false},
                // order date
                {targets : [6], width : "7%"},
                // urls
                {targets : [7], width : "5%", orderable : false, searchable : false, className : "alignverticalmiddle center"},
                // server
                {targets : [8], width : "10%"},
                // setup
                {targets : [9], width : "3%", className : "alignverticalmiddle center"},
                // fav
                {targets : [10], width : "3%", className : "alignverticalmiddle center"},
                // promotion
                {targets : [11], width : "10%"},
                // affiliate
                {targets : [12], width : "10%"},
                // tags
                {targets : [13], width : "10%", orderable : false},
            ]
        } );

Hello,

I couldn't find this information anywhere. I am trying to achieve server side column filtering. What is the object name of filtered column sent to server ? (eg sSearch for general search)

Thanks

I did some changes to the next previous example. I have an alert() when it reaches the last file but i'd rather have the prev and next button to be disable when it reaches past the first and last record.

Here is my page: http://editor.uhmind.com/examples/api/backNext.html

Here are the code changes

                        {
                        label: "<",
                        fn: function (e) {
                            this.submit( function () {
                                var tt = $.fn.dataTable.TableTools.fnGetInstance('example');
                                var row = tt.fnGetSelected()[0];
                                var rows = table.rows( {filter:'applied'} ).nodes();
                                var index = rows.indexOf( row );
                                // added a conditional
                                if( index == 0 ) {
                                    alert('last record');
                                    tt.fnDeselect( row );
                                    tt.fnSelect( rows[index] );
                                    $('a.editor_edit').click();
                                }
                                // did some change here also
                                if ( index > 0 ) {
                                    tt.fnDeselect( row );
                                    tt.fnSelect( rows[index-1] );
                                    $('a.editor_edit').click();
                                }

                            }, null, null, false );
                        }
                                                   {
                                                   label: ">",
                        fn: function (e) {
                            this.submit( function () {
                                var tt = $.fn.dataTable.TableTools.fnGetInstance('example');
                                var row = tt.fnGetSelected()[0];
                                var rows = table.rows( {filter:'applied'} ).nodes();
                                var index = rows.indexOf( row );

                                // added conditional
                                if( index == rows.length-1 ) {
                                    alert('last record');
                                    tt.fnDeselect( row );
                                    tt.fnSelect( rows[index] );
                                    $('a.editor_edit').click();
                                }
                                // made changes here also
                                if ( index < rows.length-1 ) {
                                    tt.fnDeselect( row );
                                    tt.fnSelect( rows[index+1] );
                                    $('a.editor_edit').click();
                                }
                            }, null, null, false );
                        }

Debugger when serverSide set to false: http://debug.datatables.net/ekaqad Unsure why my column data is not displaying. There is also this message in the debugger: "aoColumns": "-- Previously seen object. Not included due to circular reference possibility --"

Debugger when serverSide set to true: http://debug.datatables.net/uxorik "Showing 0 to 0 of 0 entries (filtered from NaN total entries)"

How do I filter my table on the values of a certain column. My showAll function needs to show everything except for records with 'I' in column 12, and my showNon fuction needs to ONLY show records that have 'I','R', or 'W' in column 12. Also, I only display 10 records per page and it only sorts on what is displayed on each individual page instead of the whole data set (so if I have 15 records it fiters the first 10, then when I go to the second page it filters the last 5 seperately.) How can I fix this?

table is populated via HTML

Right now I have

function showAll(){
var theTable = $('#myTable').dataTable({
            "columnDefs":[{"orderable":false, "targets":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]}],
            "searching":false,
            "sorting":[[8,"desc"]],
            "paging":false,
            "filtering":false,
            "autoWidth":false,
            "info":false,
            "destroy":true
            }); 
}

function showNon(){
        var theTable = $('#myTable').dataTable({
            "columnDefs":[{"orderable":false, "targets":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]}],
            "searching":false,
            "sorting":[[8,"desc"]],
            "paging":false,
            "filtering":false,
            "autoWidth":false,
            "info":false,
            "destroy":true
            }); 
}

Hello, I have a datatable of about 1000 items. For some reason, 2-300 of these items seem to not be caught in the sorting mechanism. They show up in random orders, and then all of a sudden, all the other items show up sorted just fine. My table is filled via Ajax, and I am thinking that it might have to do with me adding data to the columns after the fact. Maybe I need to reinitialize the sort some how? Here is my code:

$('#customers').dataTable({
        ajax: {
            url: restURL,
            dataSrc: ""
        },
        "columnDefs": [
            { "visible": false, "targets": [0] },
            { "className": 'never', "targets": [0]}
        ],
        dom:            "Tfrtip",
        bInfo:          false,
        paging:         false,
        scrollY:        215,
        order: [[ 2, "asc"]],
        columns: [
            { "data": "Customer_ID" },
            {"data":"Department",
                "createdCell": function (td, cellData, rowData, row, col) {
                    if ($(td).html() === "") {
                        $(td).append(rowData['Cmpny_Name']);
                    }
                }
            },
            {"data":"Name_Last",
                "createdCell": function (td, cellData, rowData, row, col) { //Might need to change this to createdCell
                    if ($(td).html() !== "") {
                        $(td).append(', '+rowData['Name_First']);
                    } else {
                        $(td).append(rowData['Cmpny_Contact_Last']+', '+rowData['Cmpny_Contact_First']);
                    }
                    
                }
            },
            { "data": "PI_Voice_Nmbr" },
            { "data": "PI_Email" },
            { "data": "Mail_Code" }
        ],
        tableTools: {
            sRowSelect: 'multi',
            // sSelectedClass: ".selected",
            // "sRowSelector": "td:not(:first-child)",
            aButtons: [
                "select_all", 
                "select_none", 
                {
                    "sExtends":    "select",
                    "sButtonText": "More Info",
                    "fnClick": function () {
                        var salesOrderID = webOrderTable.cell(this, 0).data();
                        getSalesOrderData(salesOrderID);
                        lineItemData(salesOrderID);
                    }
                }
            ]
        }
    });

Is there a way to try and reinitialize the sort afterwards and see if that might be the problem? Thanks David

http://datatables.net/blog/2012-02-01

I am developing an SPA and would prefer not to have fnClick call a function to create and populate a new tab due to scoping issues in my application. I would prefer to register a JavaScript event handler for my sButtonText. Does anyone know if that is possible?

Thanks!

bD

I wonder if I can add an order master record and one or more order details records associated with the master record.

I can see examples of child records, but not Master/Details

Regards Pete

Dear community, thanks for the excellent product!

I've spotted a bug in the colReorder extension, supplied in version 10.5, in particular in the fnDestroy() function. The bug happens if the code calls the destroy method of the extension, and then destroys the whole table; in this case, the "this.s" property of the extension itself is null.

The bug can be resolved simply by adding

        if (!this.s)
            return;

before the for statement, line 1095.

I hope this might be useful to someone else...

Hi Alan,

I am trying to populate data table using server side processing but its not working..Trying this for several hours but no luck.I don't know whether i'm missing something.Please help.Here is my datatable debugger url: http://debug.datatables.net/eguwer

HTML table

     <table class="table table-striped table-bordered table-condensed" id="reportTable">
                            <thead>
                                <tr>
                                    <th>Sl.No.</th>
                                    <th>Document Name</th>
                                    <th>Document Type</th>
                                    <th>Authors</th>
                                    <th>Upload</th>
                                    <th>Last Modified</th>
                                    <th>Expiry</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

Response JSON

{"iTotalRecords":15,"aaData":[{"expiryDate":"28/03/2015","docName":"7800_standards.pdf","uploadDate":"31/03/2015_10:58:22:284","docType":"PDF Upload","author":"Prince Radhakrishnan","lastModified":"01/04/2015_12:48:49:877","slNo":"1"},{"expiryDate":"24/04/2015","docName":"Fractal_Tiger.jpg","uploadDate":"01/04/2015_12:48:49:877","docType":"Docx Upload","author":"Prince Radhakrishnan","lastModified":"01/04/2015_12:48:49:877","slNo":"2"}],"iTotalDisplayRecords":5,"sEcho":1}

Datatable initialisation

var table = $('#reportTable').dataTable({
                    "sPaginationType": "full_numbers",
                    "bProcessing": true,
                    "bServerSide": true,
                    "bPaginate": true,
                    "bSort": true,
                    "iDisplayLength": 10,
                    "bInfo": true,
                    "sAjaxSource": "generateReportAJAX",
                    "sServerMethod": "POST",
                    "aoColumns": [
                        {"mData": "slNo"},
                        {"mData": "docName"},
                        {"mData": "docType"},
                        {"mData": "author"},
                        {"mData": "uploadDate"},
                        {"mData": "lastModified"},
                        {"mData": "expiryDate"}
                       ]
});

But now, I'm getting Cannot read property 'length' of undefined error in browser.Any help would be appreciated.

Regards, Prince

Hi Guys,

I met next problem using DataTables 1.10. If i use DataTables + jquery fadeIn function, i get next

https://cloud.mail.ru/public/8e1841187f87/screen1.jpg[text]

my config is next:

var oTable = j('#portfoliosTable').dataTable( { "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "iDisplayLength": 25, "sPaginationType": "full_numbers", "bJQueryUI": true, "bSort":true, "order": sort, "scrollX": true } );

j('#tableContent').fadeIn(2000);

and i do fadeIn on the row where table is placed

any Idea guys how to fix it ?

link to DataTables live: http://live.datatables.net/dojigasu/1/

I know possibly you saw this question in another branch... but guys, i credited my account, one week passed and no answers...

Thanks in advance

Hi i am trying to run a report on multiple databases. joining them together and list out the data sorted by date and time. how do i do this in serversideloading?

currently data is sorted but each of the database is sorted seperately.

Chris

1 down vote favorite

I have a simple 3 column table (second code sample below). Most of the time it would be displayed on a wide-screen HD TV, so I would like the structure to be like the first code sample below, and yet depending on the width of the screen, if it's viewed on smaller screens instead of having 4 repeating columns groups, change it to 3, then 2 then 1 for phones. How can I do this with CSS/Media queries?

<table>
  <tr>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
  </tr>
  <tr>
    <td>12:06 PM</td>
    <td>2</td>
    <td>Ackerman</td>
    <td>11:53 AM</td>
    <td>3</td>
    <td>Alexander</td>
    <td>12:04 PM</td>
    <td>3</td>
    <td>Allan</td>
    <td>02:00 PM</td>
    <td>2</td>
    <td>Allen</td>
  </tr>
</table>



<table>
        <tr>
          <th>Time</th>
          <th>Hole</th>
          <th>Player</th>
        </tr>
        
          <tr>
            <td>12:06 PM</td>
            <td>2</td>
            <td>Ackerman</td>
          </tr>
        
          <tr>
            <td>11:53 AM</td>
            <td>3</td>
            <td>Alexander</td>
          </tr>
        
          <tr>
            <td>12:04 PM</td>
            <td>3</td>
            <td>Allan</td>
          </tr>
        
          <tr>
            <td>02:00 PM</td>
            <td>2</td>
            <td>Allen</td>
          </tr>
        
          <tr>
            <td>12:03 PM</td>
            <td>1</td>
            <td>Anderson</td>
          </tr>
        
          <tr>
            <td>02:49 PM</td>
            <td>3</td>
            <td>Apple</td>
          </tr>
        
          <tr>
            <td>02:53 PM</td>
            <td>1</td>
            <td>Campbell</td>
          </tr>
        
          <tr>
            <td>02:15 PM</td>
            <td>4</td>
            <td>Deane</td>
          </tr>
        
          <tr>
            <td>04:00 PM</td>
            <td>1</td>
            <td>Decker</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Esposito</td>
          </tr>
        
          <tr>
            <td>02:41 PM</td>
            <td>4</td>
            <td>Estes</td>
          </tr>
        
          <tr>
            <td>01:29 PM</td>
            <td>2</td>
            <td>Faidley</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Fisher</td>
          </tr>
        
          <tr>
            <td>02:16 PM</td>
            <td>4</td>
            <td>Gaus</td>
          </tr>
        
          <tr>
            <td>02:15 PM</td>
            <td>3</td>
            <td>Giancola</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Gibbons</td>
          </tr>
        
          <tr>
            <td>02:13 PM</td>
            <td>3</td>
            <td>Hansen</td>
          </tr>
        
          <tr>
            <td>02:51 PM</td>
            <td>2</td>
            <td>Healy</td>
          </tr>
        
          <tr>
            <td>02:42 PM</td>
            <td>4</td>
            <td>Kain</td>
          </tr>
        
          <tr>
            <td>04:01 PM</td>
            <td>2</td>
            <td>Kestner</td>
          </tr>
        
          <tr>
            <td>02:12 PM</td>
            <td>3</td>
            <td>King</td>
          </tr>
        
          <tr>
            <td>11:03 AM</td>
            <td>2</td>
            <td>Krieger</td>
          </tr>
        
          <tr>
            <td>02:51 PM</td>
            <td>3</td>
            <td>Lee</td>
          </tr>
        </table>
  </table>

Hi,

I'm using the DataTables Editor in server-side mode and have the requirement to perform a particular action when a specific field value has changed during an edit operation. When the specific field value hasn't changed, the action would not be performed.

I'm accessing the new field values via the 'data[columnName]' HTTP parameters passed by the editor but I don't believe there is an equivalent way of accessing the values prior to the edit operation.

Is this possible or do you have any pointers on how I could achieve this?

Regards, Tom

I have a simple question, after you load data to the table from an ajaxSource, can you access that data later For example I have ```$(document).ready(function() {

   dataTable = $('#example').dataTable( {

    "bProcessing": true,
    retrieve: true,
    //"bServerSide": true,
    "sAjaxSource": "GetData",


    aoColumns: [
                    { mData: 'id' },
                    { mData: 'name' },
                    { mData: 'age' }

               ]
} );

} );```

GetData outputs the data in a json format . Can I use jquery to access this json data. For example, on a click of a button can I view the number of counts of people who are older than 25

I've posted a question in stackoverflow, can someone help me get an answer:

http://stackoverflow.com/questions/29804178/jquery-datatables-scroller-ajax-not-being-called-the-second-time

Thanks in advane.

I have a large table of assay values with many columns (samples), each column/sample has many rows representing genetic assay values. Since there are thousands of rows in the db table I am using server-side processing. This works well if I hardcode the columns/samples to display with DataTables.

My website has two functions: to select the samples to display (with a set of checkboxes) and to display with server-side processing the data table with the selected columns/samples.

The server-side example scripts all use a hardcoded $columns array of arrays. Since columns are the result of database query I cannot fix $columns in advance. I tried to POST this array to the server-side processing script but this didn't work.

My setup is the following: first.html: displays the checkboxes to select the samples, submit to second.php second.php: shows checkboxes, checked for compatible samples (there is a hierarchy of samples); checked boxes can be unchecked third.php: searches database for selected samples and should display with server-side datatables plugin.

It is not clear to me how to combine the selected samples list with server-side processing.