I initialize a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

I initialize a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

I initialize a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

I initialize a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

I initialize a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

I initialized a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

the datatables table looks good if set to 100% width in the table html tag, but sometimes there aren't so many columns and on a large screen, the data look a bit lost on such a wide table, so I'd prefer to set it to automatic width ... but when I comment out the 100%, the header and the data of the table get out of sync, and the resulting table is completely garbled. Apparently this only happens when the table fits on the screen in its entirety and horizontal scrolling is not necessary - when I output the table on a narrow screen and horizontal scrolling is necessary, the table looks good.

Hi there,

I've got a datable and I'm using orthogonal data to sort a date field with the sort being a unixtimestamp. The data is being drawn from JSON. Everything works great on dev server however on the live site the sort on the date column does not sort. All other columns sort. The other symptom is that there when you click on the sort there is a noticeable pause, that does not exist on the other columns. The JSON is only about 170 rows, and I can't see anything unusual about the data and it's valid JSON.

Currently using 10.10.7, I've put the column definition. Does anyone have any idea how I should go about debugging this? Are there any known possible culprits?

Many thanks!

columns: [
            { "data": "display_id" },
            { "data": "status_name"},
            { "data": "amount" },
            { "data":{
                 "_": "trans_date_human",
                     "sort": "trans_date"
            }
            },
            { "data": "parent_display_id" },
            { "data": "type_name"},
            { "data": "isfor_name" },
            { "data": "payer_name"},
            { "data": "trans_id"},
            { "data": "custom_receipt_no"},
            { "data": "bank_account_name"},
            { "data": "display_id"}
        ],

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

I've been trying to find a way of preventing a hidden column from being exported to a CSV file when using Buttons and csvHtml5.

So far I've got the column header hidden in the HTML, and have a class of 'never' for the column data in the DataTables initialisation, which works to prevent the column appearing in the browser, but it still gets exported to the CSV file.

Is there an extend option for csvHtml5 that I've yet to find that will prevent this?

I need to iterate my table rows based on current sort and filter criteria, and see that fnGetAdjacentTr is the plug-in to accomplish this. I included the plugin like this:

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.10/api/fnGetAdjacentTr.js"></script>

My table is initialized and used like this:

oTable = $('#lynx_table_1').DataTable(defaultOptions); 

From the example shown here: https://www.datatables.net/plug-ins/api/fnGetAdjacentTr I wrote my test code as follows:

 var n1 = $('#lynx_table_1 tbody tr').eq(2)[0];
 var next = oTable.fnGetAdjacentTr( n1 );
 var prev = oTable.fnGetAdjacentTr( n1, false );

I verified that n1 is pointing at the proper row, but the next line throws the following error: TypeError: oTable.fnGetAdjacentTr is not a function

Now, I realize that this plug-in is written in the pre-1.10 style, and I am using 1.10, but I thought that including the code, regardless of the style, would work across versions like this.

With 1.10, how do I call this 1.9x plug-in, or is my problem somewhere else?

When I submit the full editor form, this setFormatter is honored and the database name field is updated as expected. However, when using bubble editing, the setFormatter is not applied and the name field is not updated.

Am I doing something incorrectly?

Field::inst( 'name' )
                ->set( Field::SET_BOTH ) // Do this for create and edit.
                ->setFormatter( function($val, $data, $field) {return $data['last_name'] . ', ' . $data['first_name'];}), 

This works:

{ extend: 'create', editor: editor }

This gets the error:

{ extend: 'edit', editor: editor }

Full code: ...

 $('#TestTable').DataTable({
        ajax: {
            url: '/Maintenance/ActSchoolMappingList',
            dataSrc: ''
        },

        dom: 'Bfrtip',
        columns: [
            { data: 'SchoolCode' },
            { data: 'SchoolName' },
            // etc
        ],
        select: true,
        paging: false,
        searching: false,
        buttons: [

           // { extend: 'create', editor: editor },               
          { extend: 'edit', editor: editor }

        ]
    });

...

Debugger info; http://debug.datatables.net/uwaqeb

I need the AJAX request to map to a Microsoft MVC action, so I need the post data to match the signature. That means I need to change data[0][BatchId] to be just "BatchId". Can this be done?

Hello, I am using Server-side processing, but I got this message '''Requested unknown parameter''' http://debug.datatables.net/ohevag Best Regards,

My datatable always displays "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" even I have correctly set the property "recordsTotal" and "recordsFiltered" http://debug.datatables.net/etuxos

Regards,

The table is Always with the message "Showing 1 to 10 of 10 entries always ", even I set recordsTotal":9635,"recordsFiltered":9635 in the json data

http://debug.datatables.net/osuvug

{"data":[{"License Number":"AT/011/001","Product name":"A+ Smooth, IQ Selection smooth","Category:":"productGroup3","Manufacturer:":"Mondi Uncoated Fine Paper","Country(ies):":"Andorra , Zimbabwe , Zambia , South Africa , Yemen , The Former Yugoslav Republic Of Macedonia , Samoa , Vanuatu , Viet Nam , Venezuela (bolivarian Republic Of) , Saint Vincent And The Grenadines , Uzbekistan , Uruguay , United States Of America , Uganda , Ukraine , United Republic Of Tanzania , Taiwan , Tuvalu , Trinidad And Tobago , Turkey , Tonga , Tunisia , Turkmenistan , Timor-leste , Tajikistan , Thailand , Togo , Chad , Swaziland , Syrian Arab Republic , El Salvador , Sao Tome And Principe , Suriname , Somalia , Senegal , San Marino , Sierra Leone , Slovakia , Slovenia , Singapore , Sweden , Sudan , Seychelles , Solomon Islands , Saudi Arabia , Rwanda , Russian Federation , Serbia , Romania , Qatar , Paraguay , Palau , Portugal , Poland , Pakistan , Philippines , Papua New Guinea , Peru , Panama , Oman , New Zealand , Nauru , Nepal , Norway , Netherlands , Nicaragua , Nigeria , Niger , Namibia , Mozambique , Malaysia , Mexico , Malawi , Maldives , Mauritius , Malta , Mauritania , Myanmar , Mali , Marshall Islands , Madagascar , Montenegro , Republic Of Moldova , Monaco , Morocco , Libya , Latvia , Luxembourg , Lithuania , Lesotho , Liberia , Sri Lanka , Liechtenstein , Saint Lucia , Lebanon , Lao PeopleÆs Democratic Republic , Kazakhstan , Kuwait , Republic Of Korea , Democratic Peoples Republic Of Korea , Saint Kitts And Nevis , Comoros , Kiribati , Cambodia , Kyrgyzstan , Kenya , Japan , Jordan , Jamaica , Italy , Iceland , Iran (islamic Republic Of) , Iraq , India , Israel , Ireland , Indonesia , Hungary , Haiti , Croatia , Honduras , Hong-kong , Guyana , Guinea Bissau , Guatemala , Greece , Guinea , Gambia , Ghana , Georgia , Grenada , United Kingdom Of Great Britain And Northern Ireland , Gabon , France , Micronesia (federated States Of) , Fiji , Finland , Ethiopia , Spain , Eritrea , Egypt , Estonia , Ecuador , Algeria , Dominican Republic , Dominica , Denmark , Djibouti , Germany , Czech Republic , Cyprus , Cape Verde , Cuba , Costa Rica , Equatorial Guinea , Colombia , China , Cameroon , Chile , C¶te Divoire , Switzerland , Congo , Central African Republic , Democratic Republic Of The Congo , Canada , Belize , Belarus , Botswana , Bhutan , Bahamas , Brazil , Bolivia (plurinational State Of) , Brunei Darussalam , Benin , Burundi , Bahrain , Bulgaria , Burkina Faso , Belgium , Bangladesh , Barbados , Bosnia And Herzegovina , Azerbaijan , Australia , Austria , Argentina , Angola , Armenia , Albania , Antigua And Barbuda , Afghanistan , United Arab Emirates ","Retailer(s):":"N/A"},{"License Number":"AT/011/001","Product name":"ARIA 70","Category:":"productGroup3","Manufacturer:":"Mondi Uncoated Fine Paper","Country(ies):":"Austria , Slovakia , Slovenia , Sweden , Romania , Portugal , Poland , Netherlands , Malta , Latvia , Luxembourg , Lithuania , Italy , Ireland , Hungary , Croatia , Greece , United Kingdom Of Great Britain And Northern Ireland , France , Finland , Spain , Estonia , Denmark , Germany , Czech Republic , Cyprus , Bulgaria , Belgium ","Retailer(s):":"Officart"},{"License Number":"AT/011/007","Product name":"BALLET BRILLIANT","Category:":"productGroup3","Manufacturer:":"OJSC \"Ilim Group\"","Country(ies):":"Austria , Sweden , Norway , Latvia ","Retailer(s):":"N/A"},{"License Number":"AT/011/007","Product name":"BALLET CLASSIC","Category:":"productGroup3","Manufacturer:":"OJSC \"Ilim Group\"","Country(ies):":"Austria , Sweden , Norway , Latvia ","Retailer(s):":"N/A"},{"License Number":"AT/011/007","Product name":"BALLET PREMIER","Category:":"productGroup3","Manufacturer:":"OJSC \"Ilim Group\"","Country(ies):":"Austria , Sweden , Norway , Latvia ","Retailer(s):":"N/A"},{"License Number":"AT/011/007","Product name":"BALLET UNIVERSAL","Category:":"productGroup3","Manufacturer:":"OJSC \"Ilim Group\"","Country(ies):":"Austria , Sweden , Norway , Latvia ","Retailer(s):":"N/A"},{"License Number":"AT/011/001","Product name":"BIO TOP 3","Category:":"productGroup3","Manufacturer:":"Mondi Uncoated Fine Paper","Country(ies):":"Andorra , Zimbabwe , Zambia , South Africa , Yemen , The Former Yugoslav Republic Of Macedonia , Samoa , Vanuatu , Viet Nam , Venezuela (bolivarian Republic Of) , Saint Vincent And The Grenadines , Uzbekistan , United States Of America , Uganda , Ukraine , United Republic Of Tanzania , Taiwan , Tuvalu , Trinidad And Tobago , Turkey , Tonga , Tunisia , Turkmenistan , Timor-leste , Tajikistan , Thailand , Togo , Chad , Swaziland , Syrian Arab Republic , El Salvador , Sao Tome And Principe , Suriname , Somalia , Senegal , San Marino , Sierra Leone , Slovakia , Slovenia , Singapore , Sweden , Sudan , Seychelles , Solomon Islands , Saudi Arabia , Rwanda , Russian Federation , Serbia , Romania , Qatar , Paraguay , Palau , Portugal , Poland , Pakistan , Philippines , Papua New Guinea , Peru , Panama , Oman , New Zealand , Nauru , Nepal , Norway , Netherlands , Nicaragua , Nigeria , Niger , Namibia , Mozambique , Malaysia , Mexico , Malawi , Maldives , Mauritius , Malta , Mauritania , Myanmar , Mali , Marshall Islands , Madagascar , Montenegro , Republic Of Moldova , Monaco , Morocco , Libya , Latvia , Luxembourg , Lithuania , Lesotho , Liberia , Sri Lanka , Liechtenstein , Saint Lucia , Lebanon , Lao PeopleÆs Democratic Republic , Kazakhstan , Kuwait , Republic Of Korea , Democratic Peoples Republic Of Korea , Saint Kitts And Nevis , Comoros , Kiribati , Cambodia , Kyrgyzstan , Kenya , Japan , Jordan , Jamaica , Italy , Iceland , Iran (islamic Republic Of) , Iraq , India , Israel , Ireland , Indonesia , Hungary , Haiti , Croatia , Honduras , Hong-kong , Guyana , Guinea Bissau , Guatemala , Greece , Guinea , Gambia , Ghana , Georgia , Grenada , United Kingdom Of Great Britain And Northern Ireland , Gabon , France , Micronesia (federated States Of) , Fiji , Finland , Ethiopia , Spa in , Eritrea , Egypt , Estonia , Ecuador , Algeria , Dominican Republic , Dominica , Denmark , Djibouti , Germany , Czech Republic , Cyprus , Cape Verde , Cuba , Costa Rica , Equatorial Guinea , Colombia , China , Cameroon , Chile , C¶te Divoire , Switzerland , Congo , Central African Republic , Democratic Republic Of The Congo , Canada , Belize , Belarus , Botswana , Bhutan , Bahamas , Brazil , Bolivia (plurinational State Of) , Brunei Darussalam , Benin , Burundi , Bahrain , Bulgaria , Burkina Faso , Belgium , Bangladesh , Barbados , Bosnia And Herzegovina , Azerbaijan , Australia , Austria , Argentina , Angola , Armenia , Albania , Antigua And Barbuda , Afghanistan , United Arab Emirates ","Retailer(s):":"N/A"},{"License Number":"AT/011/001","Product name":"BIO TOP 3« high-speed inkjet","Category:":"productGroup3","Manufacturer:":"Mondi Uncoated Fine Paper","Country(ies):":"Austria , Slovakia , Slovenia , Sweden , Romania , Portugal , Poland , Netherlands , Malta , Latvia , Luxembourg , Lithuania , Italy , Ireland , Hungary , Croatia , Greece , United Kingdom Of Great Britain And Northern Ireland , France , Finland , Spain , Estonia , Denmark , Germany , Czech Republic , Cyprus , Bulgaria , Belgium ","Retailer(s):":"N/A"},{"License Number":"AT/011/002","Product name":"Balance Pure","Category:":"productGroup3","Manufacturer:":"Lenzing Papier GmbH","Country(ies):":"Austria ","Retailer(s):":"N/A"},{"License Number":"AT/011/001","Product name":"Balance Pure","Category:":"productGroup3","Manufacturer:":"Mondi Uncoated Fine Paper","Country(ies):":"Zimbabwe ","Retailer(s):":"Papyrus"}],"draw":0,"recordsTotal":9635,"recordsFiltered":9635}

Best Regards

I have two datatables, on the same html page, that post to the same node.js server page. When I create a record in either of the tables how can I detect in my server page which table has posted the data? It appears that the array that is sent doesn't contain that information:

action=create data[0][first_name]=Ted data[0][last_name]=Hughs data[0][position]=CEO data[0][office]=London data[0][extn]=3456 data[0][start_date]=2016-02-12 data[0][salary]=100000

Is it a case of you have to post to different server pages?

Hi,

I'm working on a website where fancybox opens a new iframe with some bootstrap Tabs, each containing a datatable.

I'm using the current function to redraw the table to fit the screen responsively:

$(document).ready(function() { $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {

   $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
} );

} );

This works perfectly on my computer when i resize the browser windows to match an iPhone resolution.

But when I try this on the actual iPhone, it works like this: 1. Tab containing datatable clicked - no redraw is done, fullsize datatable with no change 2. Another tab clicked, any tab 3. Back to tab on step 1 - NOW it worked and the table has been responsively resized

Why? As I said works perfect on PC (Chrome).

Dear all, processing window won't disappear even I have "bProcessing" : true, http://debug.datatables.net/emoxik Thanks and regards,

how do I reference the search[value] post?

I tried: $_POST['search[value]']

but this didn't work.