I am trying to set the default sort to the second column in my jquery datatable.  It by default sorts by index 0.  I am using the `&quot;aaSorting&quot;: [[ 1, &quot;asc&quot; ]]` syntax but it highlights the column which I don&#39;t want on initial load.  How can I set the default sort of a specific column without it highlighting the column as if no sorting was involved and the 0 index column was being used.

jquery datatables default sort

I am newbie for DataTables. I want to add button on each row for edit and delete(like below image)

![enter image description here][1]


  [1]: http://i.stack.imgur.com/9WuRe.png

I have tried with code: 

**Test.cfm**

&lt;!-- language: lang-html --&gt;

    &lt;table id=&quot;myDataTable&quot; class=&quot;table table-striped table-bordered&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;UserID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;UserName&lt;/th&gt;
            &lt;th&gt;Passowrd&lt;/th&gt;
            &lt;th&gt;Email&lt;/th&gt;
             &lt;th&gt;IsActive&lt;/th&gt;
             &lt;th&gt;Command&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt; 
    &lt;/tbody&gt;
&lt;/table&gt;
                                    
&lt;!-- language: lang-js --&gt;
	
    $(document).ready(function () {
        var oTable = $(&#39;#myDataTable&#39;).dataTable({
           // &quot;bServerSide&quot;: true,
            &quot;sAjaxSource&quot;: &quot;fetchUserData.cfm&quot;,
            &quot;bProcessing&quot;: true,
            &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
            &quot;aoColumns&quot;: [
                { &quot;mData&quot;: null },
                { &quot;mData&quot;: &quot;Name&quot;, &quot;sTitle&quot;: &quot;Name&quot; , &quot;sWidth&quot;: &quot;20%&quot;},
                { &quot;mData&quot;: &quot;UserName&quot;, &quot;sTitle&quot;: &quot;UserName&quot;, &quot;sWidth&quot;: &quot;20%&quot; },
                { &quot;mData&quot;: &quot;Passowrd&quot;,&quot;sTitle&quot;: &quot;Passowrd&quot;, &quot;sWidth&quot;: &quot;20%&quot;  },
    			{ &quot;mData&quot;: &quot;Email&quot;,&quot;sTitle&quot;: &quot;Email&quot;  , &quot;sWidth&quot;: &quot;20%&quot;},
    			{ &quot;mData&quot;: &quot;IsActive&quot;,&quot;sTitle&quot;: &quot;IsActive&quot; , &quot;sWidth&quot;: &quot;20%&quot; },
                {
                    &quot;mData&quot;: null,
                    &quot;bSortable&quot;: false,
                   &quot;mRender&quot;: function (o) { return &#39;&lt;a href=#/&#39; + o.userid + &#39;&gt;&#39; + &#39;Edit&#39; + &#39;&lt;/a&gt;&#39;; }
                }
            ]
        });
    
    } );
	 


**fetchUserData.cfm**

&lt;!-- language: lang-js --&gt;

    {
    &quot;aaData&quot;: [
        [
            &quot;1&quot;,
            &quot;sameek&quot;,
            &quot;sam&quot;,
            &quot;sam&quot;,
            &quot;sameek@test.com&quot;,
            &quot;1&quot;,
            &quot;&quot;
        ],
        [
            &quot;2&quot;,
            &quot;arun singh&quot;,
            &quot;arun&quot;,
            &quot;arun&quot;,
            &quot;arunsingh@test.com&quot;,
            &quot;0&quot;,
            &quot;&quot;
        ],
        [
            &quot;9&quot;,
            &quot;s s&quot;,
            &quot;sam3&quot;,
            &quot;sam3&quot;,
            &quot;ss@s.com&quot;,
            &quot;0&quot;,
            &quot;&quot;
        ],
        [
            &quot;10&quot;,
            &quot;sameek mishra&quot;,
            &quot;sam56&quot;,
            &quot;sam&quot;,
            &quot;same@s.com&quot;,
            &quot;0&quot;,
            &quot;&quot;
        ],
        [
            &quot;11&quot;,
            &quot;narendra kumar&quot;,
            &quot;narendra&quot;,
            &quot;nav&quot;,
            &quot;sa@sa.com&quot;,
            &quot;1&quot;,
            &quot;&quot;
        ],
        [
            &quot;12&quot;,
            &quot;test test&quot;,
            &quot;test&quot;,
            &quot;test&quot;,
            &quot;test2@test.com&quot;,
            &quot;1&quot;,
            &quot;&quot;
        ]
    ]
     }



How do I add button on each row in datatable?

I am using jQuery and datatables.  I want to add a class to the TR element of a particular row.  I know how to find the row. The `console.dir(row);` shows the `row` object and that starts with a `tr` element.  I can&#39;t get the jQuery selector to do anything though.  What am I missing?

    table = $(&#39;#resultTable&#39;).DataTable({
        aaSorting: [],
        ajax: {...},
        columnDefs: [...],
        createdRow: function (row, data, index) {
            //
            // if the second column cell is blank apply special formatting
            //
            if (data[1] == &quot;&quot;) {
                console.dir(row);
                $(&#39;tr&#39;, row).addClass(&#39;label-warning&#39;);
            }
        }
    });

jQuery datatables add class to tr

I am trying to implement row details in my [datatables][1] just like this [example][2]. 

When I click on the show more image of my table, I get an error in my firebug console saying:

    TypeError: oTable.row is not a function
    var row = oTable.row(tr);

Here is also a [fiddle][3] of my code that generates this error.

As i understand it, the `row()` function of my datatables is not found. But i don&#39;t get it... I use the latest datatables version with jquery version 1.11.1 (and not 1.11.0 as shown in fiddle) which is what is used in the example also(on datatables website).

I am stuck... Anyone has any idea why I get this error?

Thanks a lot


  [1]: http://datatables.net
  [2]: http://datatables.net/examples/api/row_details.html
  [3]: http://jsfiddle.net/2gLqgL7m/

table.row is not a function

I&#39;m using [datatables][1] for displaying server-side data in tables.

I can&#39;t target and style individual cells (`&lt;TD&gt;`) though. I search a bit and found it might be possible with:

    &quot;fnRowCallback&quot;: function( nRow, aData, iDisplayIndex ) {
        ....
    }

... but I&#39;m not quite sure how because I have a few table and not all have the same number of columns and rows. I want to give common class to all `TDs` of a &#39;column&#39;. 

  [1]: http://www.datatables.net

Giving custom classes to each TD for styling - Datatables &amp; jQuery

 

  &lt;script src=&quot;../js/plugins/data-tables/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;   

  &lt;script src=&quot;../js/plugins/data-tables/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;

  &lt;script src=&quot;../js/plugins/data-tables/DT_bootstrap.js&quot;&gt;&lt;/script&gt;
   

 
    &lt;script&gt;

        jQuery(document).ready(function () {

         
            $(&#39;#sample_3 tfoot th&#39;).each(function () {

                var title = $(&#39;#sample_3 thead th&#39;).eq($(this).index()).text();

                $(this).html(&#39;&lt;input type=&quot;text&quot; placeholder=&quot;Search &#39; + title + &#39;&quot; /&gt;&#39;);
            });

            // DataTable
            var table = $(&#39;#sample_3&#39;).dataTable();

            // Apply the filter
            table.columns().eq(0).each(function (colIdx) {

                $(&#39;input&#39;, table.column(colIdx).footer()).on(&#39;keyup change&#39;, function () {

                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });
            });

        });
    &lt;/script&gt;


I got table.columns is not a function js error , what is missing i am not understand.

source : https://datatables.net/examples/api/multi_filter.html


table.columns is not a function in datatable.js

I am using [jQuery DataTables][1]. 

I want to remove the search bar and footer (showing how many rows there are visible) that is added to the table by default. I just want to use this plugin for sorting, basically. Can this be done?

  [1]: http://www.datatables.net

How can I remove the search bar and footer added by the jQuery DataTables plugin?

I am using the datatables jquery plugin and want to sorty by dates.

I know they got a plugin but I can&#39;t find where to actually download it from

http://datatables.net/plug-ins/sorting

I believe I need this file: dataTables.numericComma.js yet I can&#39;t find it anywhere and when I download datatables it does not seem to be in the zip file.

I am also not sure if I need to make my own custom date sorter to pass into this plugin.

I am trying to sort this format MM/DD/YYYY HH:MM TT(AM |PM)

Thanks

**Edit**

How can I change this to sort by MM/DD/YYYY HH:MM TT(AM |PM) and change it to U.S date?

    jQuery.fn.dataTableExt.oSort[&#39;uk_date-asc&#39;]  = function(a,b) {
    	var ukDatea = a.split(&#39;/&#39;);
    	var ukDateb = b.split(&#39;/&#39;);
    	
    	var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    	var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
    	
    	return ((x &lt; y) ? -1 : ((x &gt; y) ?  1 : 0));
    };
    
    jQuery.fn.dataTableExt.oSort[&#39;uk_date-desc&#39;] = function(a,b) {
    	var ukDatea = a.split(&#39;/&#39;);
    	var ukDateb = b.split(&#39;/&#39;);
    	
    	var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    	var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
    	
    	return ((x &lt; y) ? 1 : ((x &gt; y) ?  -1 : 0));
    };

How to sort by Date with DataTables jquery plugin?

With [DataTable][1] I can order, list, do pagination but I want to detect when the pagination changes, I&#39;ve seen the [API][2] but the only one I can do is change the page but no detect this change.

  [1]: http://datatables.net/
  [2]: http://datatables.net/api

Detect page change on DataTable

I am getting this error with the following:

    jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property &#39;style&#39; of undefined(…)
    _fnCalculateColumnWidths @ jquery.dataTables.js:4089
    _fnInitialise @ jquery.dataTables.js:3216
    (anonymous function) @ jquery.dataTables.js:6457
    each @ jquery-2.0.2.min.js:4
    each @ jquery-2.0.2.min.js:4
    DataTable @ jquery.dataTables.js:5993
    $.fn.DataTable @ jquery.dataTables.js:14595
    (anonymous function) @ VM3329:1
    (anonymous function) @ VM3156:180
    l @ jquery-2.0.2.min.js:4
    fireWith @ jquery-2.0.2.min.js:4
    k @ jquery-2.0.2.min.js:6
    (anonymous function) @ jquery-2.0.2.min.js:6

The line above referring to     (anonymous function) @ VM3156:180 is:

                    TASKLISTGRID = $(&quot;#TASK_LIST_GRID&quot;).DataTable({
                        data : response,
                        columns : columns.AdoptionTaskInfo.columns,
                        paging: true
                    });

So I am guessing this is where it is failing.

The HTML ID element exist:

  

      &lt;table id=&quot;TASK_LIST_GRID&quot; class=&quot;table table-striped table-bordered table-hover dataTable no-footer&quot; width=&quot;100%&quot; role=&quot;grid&quot; aria-describedby=&quot;TASK_LIST_GRID_info&quot;&gt;
      &lt;thead&gt;
        &lt;tr role=&quot;row&quot;&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Solution&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Status&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Category&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Type&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Due Date&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Create Date&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Owner&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Comments&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Mnemonic&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Domain&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Approve&lt;/th&gt;
          &lt;th class=&quot;sorting&quot; tabindex=&quot;0&quot; aria-controls=&quot;TASK_LIST_GRID&quot; rowspan=&quot;1&quot; colspan=&quot;1&quot;&gt;Dismiss&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
    &lt;/table&gt;

Also, the columns.AdoptionTaskInfo.columns &amp; response object arrays exist. Not sure how to debug what&#39;s wrong.. Any suggestions will be helpful..


    


DataTables: Cannot read property style of undefined

I am using the jQuery [DataTables plugin](https://www.datatables.net/) to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work:

    &quot;aoColumns&quot;: [
      { &quot;bSearchable&quot;: false },
      null
    ]   

I have also tried the following code:

    &quot;aoColumnDefs&quot;: [
      {
        &quot;bSearchable&quot;: false,
        &quot;aTargets&quot;: [ 1 ]
      }
    ]

but this still did not produce the desired results.

Disable sorting for a particular column in jQuery DataTables

I&#39;m using DataTables ([datatables.net][1]) and I would like my search box to be outside of the table (for example in my header div).

Is this possible ?


  [1]: http://www.datatables.net

Datatables - Search Box outside datatable

I am trying to work with jQuery&#39;s Datatable JS for my project from [this](https://www.datatables.net/) link.

I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my `WebForms`,the CSS,JS do not **work at all.**

Here is what I have done  : 

    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head runat=&quot;server&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;link href=&quot;css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
        &lt;div&gt;
            &lt;table id=&quot;myTable&quot; class=&quot;display&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Position&lt;/th&gt;
                        &lt;th&gt;Office&lt;/th&gt;
                        &lt;th&gt;Age&lt;/th&gt;
                        &lt;th&gt;Start date&lt;/th&gt;
                        &lt;th&gt;Salary&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tfoot&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Position&lt;/th&gt;
                        &lt;th&gt;Office&lt;/th&gt;
                        &lt;th&gt;Age&lt;/th&gt;
                        &lt;th&gt;Start date&lt;/th&gt;
                        &lt;th&gt;Salary&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/tfoot&gt;
                &lt;tbody&gt;
                   &lt;!-- table body --&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
        &lt;script src=&quot;js/jquery.dataTables.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;js/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(document).ready(function () {
                $(&#39;#myTable&#39;).DataTable();
            });
        &lt;/script&gt;
        &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;

My file structure for the JS and CSS in my Solution looks as follows : 

![File structure of JS and CSS in solution][1]

I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn&#39;t as expected. There is no CSS and even the JS doesn&#39;t work.

Also in the console i get the following errors: 

    ReferenceError: jQuery is not defined
    TypeError: $(...).DataTable is not a function

  [1]: http://i.stack.imgur.com/j62nj.png

I have still not bound any dynamic data here (like within a repeater or so) still it is not working. 

Can someone please guide me in the right direction for this problem ?

TypeError: $(...).DataTable is not a function

How do you remove the &quot;Showing 1 of N entries&quot; line of text on a dataTable (that is when using the javascript library dataTables? I think I was looking for something along these lines...

     $(&#39;#example&#39;).dataTable({
          &quot;showNEntries&quot; : false
           });

Pretty sure this is a simple one, but cannot seem to find it in the docs.

How to hide &quot;Showing 1 of N Entries&quot; with the dataTables.js library

I am using plugin [jQuery datatables][1] and load my data which I have loaded in DOM at the bottom of page and initiates plugin in this way:

    var myData = [
        {
            &quot;id&quot;: 1,
            &quot;first_name&quot;: &quot;John&quot;,
            &quot;last_name&quot;: &quot;Doe&quot;
        }
    ];
    
    $(&#39;#table&#39;).dataTable({
        data: myData
            columns: [
            { data: &#39;id&#39; },
            { data: &#39;first_name&#39; },
            { data: &#39;last_name&#39; }
        ]
    });

Now. after performing some action I want to get new data using ajax (but not ajax option build in datatables - don&#39;t get me wrong!) and update the table with these data. How can i do that using datatables API? The documentation is very confusing and I can not find a solution. Any help will be very much appreciated. Thanks.

  [1]: http://datatables.net

How to manually update datatables table with new JSON data

I am new in jQuery. I have used Datatables in grid but need not pagination. 

There is a list of orders in one page and I show them in a Datatable grid but in bottom I do not  want to show pagination.
Is there any way to remove or hide pagination from the data table by using a bit customization on the jQuery library.

![enter image description here][1]

I tried to customize it but I found very few methods to do it..

Thanks in advance.


  [1]: http://i.stack.imgur.com/q8MSN.png

how to remove pagination in datatable

I have a problem controlling the width of a table using the jQuery DataTables plugin.  The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.

Suggestions appreciated

The table declaration looks like this

    &lt;table id=&quot;querytableDatasets&quot; class=&quot;display&quot; cellspacing=&quot;0&quot;
    cellpadding=&quot;3&quot;     width=&quot;100%&quot;&gt;

And the javascript

    jQuery(&#39;#tab-datasets&#39;).load(&#39;/cgi-bin/qryDatasets&#39;, &#39;&#39;, function (){  
        jQuery(&#39;#querytableDatasets&#39;).dataTable({  
            &quot;bPaginate&quot;: false,  
            &quot;bInfo&quot;: false,  
            &quot;bFilter&quot;: false  
        });  
    });  `  


Inspecting the HTML in Firebug, you see this (note the added style=&quot;width: 0px;&quot;)

    &lt;table id=&quot;querytableDatasets&quot; class=&quot;display&quot; cellspacing=&quot;0&quot; 
    cellpadding=&quot;3&quot; width=&quot;100%&quot; style=&quot;width: 0px;&quot;&gt;

Looking in Firebug at the styles, the table.display style has been overridden.  Can&#39;t see where this is coming from

    element.style {  
      width:0;}    
    
    -- dataTables.css (line 84
    table.display { 
      margin:0 auto;  
      width:100%;  
    }  



jQuery DataTables: control table width

I am trying to implement functionality whereby clicking a button on the screen will cause my [jQuery dataTable](http://datatables.net) to refresh (as the server-side data source may have changed since the dataTable was created).

Here&#39;s what I have:

    $(document).ready(function() {
        $(&quot;#my-button&quot;).click(function() {
            $(&quot;#my-datatable&quot;).dataTable().fnReloadAjax();
        });
    });

But when I run this, it does nothing. What&#39;s the proper way to refresh the dataTable when the button is clicked? Thanks in advance!

How to reload/refresh jQuery dataTable?

I am using a Jquery plugin called [datatables][1]

Its fantastic, however I cannot get the dates to sort correctly according to the dd/mm/yyyy format.

I have looked at their support formats but none of these fixes seem to work.

Can anybody here help me please?

  [1]: http://www.datatables.net/index

Datatable date sorting dd/mm/yyyy issue

I am using jQuery datatables. When running the application, the header width is not aligned with the body width. But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment. This problem occurs only in IE.

**[JSFiddle][1]**

This is how it looks when the page gets loaded:

![enter image description here][2]


After clicking on the header:

![enter image description here][3]

My datatable code:

    $(&quot;#rates&quot;).dataTable({
        &quot;bPaginate&quot;: false,
        &quot;sScrollY&quot;: &quot;250px&quot;,
        &quot;bAutoWidth&quot;: false,
        &quot;bScrollCollapse&quot;: true,
        &quot;bLengthChange&quot;: false,
        &quot;bFilter&quot;: false,
        &quot;sDom&quot;: &#39;&lt;&quot;top&quot;&gt;rt&lt;&quot;bottom&quot;flp&gt;&lt;&quot;clear&quot;&gt;&#39;,
        &quot;aoColumns&quot;: [{
                &quot;bSortable&quot;: false
            },
            null,
            null,
            null,
            null
        ]
    });

`rates` is my table id.  
Could anyone help me with this? Thanks in advance.

  [1]: http://jsfiddle.net/EjFtX
  [2]: http://i.stack.imgur.com/NvRz8.jpg
  [3]: http://i.stack.imgur.com/RnQKt.jpg

datatable jquery - table header width not aligned with body width

I&#39;m using jQuery DataTables and I would like to know if there&#39;s possible to disable automatic sorting on the first column of the table?

My code looks like this:

    
			/* Default class modification */
			$.extend( $.fn.dataTableExt.oStdClasses, {
				&quot;sWrapper&quot;: &quot;dataTables_wrapper form-inline&quot;
			} );
			
			/* API method to get paging information */
			$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
			{
				return {
					&quot;iStart&quot;:         oSettings._iDisplayStart,
					&quot;iEnd&quot;:           oSettings.fnDisplayEnd(),
					&quot;iLength&quot;:        oSettings._iDisplayLength,
					&quot;iTotal&quot;:         oSettings.fnRecordsTotal(),
					&quot;iFilteredTotal&quot;: oSettings.fnRecordsDisplay(),
					&quot;iPage&quot;:          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
					&quot;iTotalPages&quot;:    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
				};
			}
			
			/* Bootstrap style pagination control */
			$.extend( $.fn.dataTableExt.oPagination, {
				&quot;bootstrap&quot;: {
					&quot;fnInit&quot;: function( oSettings, nPaging, fnDraw ) {
						var oLang = oSettings.oLanguage.oPaginate;
						var fnClickHandler = function ( e ) {
							e.preventDefault();
							if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
								fnDraw( oSettings );
							}
						};
			
						$(nPaging).addClass(&#39;pagination&#39;).append(
							&#39;&lt;ul&gt;&#39;+
								&#39;&lt;li class=&quot;prev disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;&amp;larr; &#39;+oLang.sPrevious+&#39;&lt;/a&gt;&lt;/li&gt;&#39;+
								&#39;&lt;li class=&quot;next disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;&#39;+oLang.sNext+&#39; &amp;rarr; &lt;/a&gt;&lt;/li&gt;&#39;+
							&#39;&lt;/ul&gt;&#39;
						);
						var els = $(&#39;a&#39;, nPaging);
						$(els[0]).bind( &#39;click.DT&#39;, { action: &quot;previous&quot; }, fnClickHandler );
						$(els[1]).bind( &#39;click.DT&#39;, { action: &quot;next&quot; }, fnClickHandler );
					},
			
					&quot;fnUpdate&quot;: function ( oSettings, fnDraw ) {
						var iListLength = 5;
						var oPaging = oSettings.oInstance.fnPagingInfo();
						var an = oSettings.aanFeatures.p;
						var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
			
						if ( oPaging.iTotalPages &lt; iListLength) {
							iStart = 1;
							iEnd = oPaging.iTotalPages;
						}
						else if ( oPaging.iPage &lt;= iHalf ) {
							iStart = 1;
							iEnd = iListLength;
						} else if ( oPaging.iPage &gt;= (oPaging.iTotalPages-iHalf) ) {
							iStart = oPaging.iTotalPages - iListLength + 1;
							iEnd = oPaging.iTotalPages;
						} else {
							iStart = oPaging.iPage - iHalf + 1;
							iEnd = iStart + iListLength - 1;
						}
			
						for ( i=0, iLen=an.length ; i&lt;iLen ; i++ ) {
							// Remove the middle elements
							$(&#39;li:gt(0)&#39;, an[i]).filter(&#39;:not(:last)&#39;).remove();
			
							// Add the new list items and their event handlers
							for ( j=iStart ; j&lt;=iEnd ; j++ ) {
								sClass = (j==oPaging.iPage+1) ? &#39;class=&quot;active&quot;&#39; : &#39;&#39;;
								$(&#39;&lt;li &#39;+sClass+&#39;&gt;&lt;a href=&quot;#&quot;&gt;&#39;+j+&#39;&lt;/a&gt;&lt;/li&gt;&#39;)
									.insertBefore( $(&#39;li:last&#39;, an[i])[0] )
									.bind(&#39;click&#39;, function (e) {
										e.preventDefault();
										oSettings._iDisplayStart = (parseInt($(&#39;a&#39;, this).text(),10)-1) * oPaging.iLength;
										fnDraw( oSettings );
									} );
							}
			
							// Add / remove disabled classes from the static elements
							if ( oPaging.iPage === 0 ) {
								$(&#39;li:first&#39;, an[i]).addClass(&#39;disabled&#39;);
							} else {
								$(&#39;li:first&#39;, an[i]).removeClass(&#39;disabled&#39;);
							}
			
							if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
								$(&#39;li:last&#39;, an[i]).addClass(&#39;disabled&#39;);
							} else {
								$(&#39;li:last&#39;, an[i]).removeClass(&#39;disabled&#39;);
							}
						}
					}
				}
			});
			
			/* Show/hide table column */
			function dtShowHideCol( iCol ) {
				var oTable = $(&#39;#example-2&#39;).dataTable();
				var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
				oTable.fnSetColumnVis( iCol, bVis ? false : true );
			};
			
			/* Table #example */
			$(document).ready(function() {
				$(&#39;.datatable&#39;).dataTable( {
					&quot;sDom&quot;: &quot;&lt;&#39;row&#39;&lt;&#39;span6&#39;l&gt;&lt;&#39;span6&#39;f&gt;r&gt;t&lt;&#39;row&#39;&lt;&#39;span6&#39;i&gt;&lt;&#39;span6&#39;p&gt;&gt;&quot;,
					&quot;sPaginationType&quot;: &quot;bootstrap&quot;,                    
					&quot;oLanguage&quot;: {
						&quot;sLengthMenu&quot;: &quot;_MENU_ records per page&quot;
					},
                    &quot;aoColumnDefs&quot;: [
                        { 
                            &quot;bSortable&quot;: false, 
                            &quot;aTargets&quot;: [ -1 ] // &lt;-- gets last column and turns off sorting
                        } 
                    ]
				});
				$(&#39;.datatable-controls&#39;).on(&#39;click&#39;,&#39;li input&#39;,function(){
					dtShowHideCol( $(this).val() );
				})
			});
		

Disable automatic sorting on the first column when using jQuery DataTables

I understand this a popular issue, and I have read all the similar questions here on Stack Overflow and other sites (including the datatables website).

To clarify, I am using

 - PHP Codeigniter
 - Materliazecss

I have also made sure that I received the JSON array correctly:
    
    [{&quot;name_en&quot;:&quot;hello&quot;,&quot;phone&quot;:&quot;55555555&quot;},{&quot;name_en&quot;:&quot;hi&quot;,&quot;phone&quot;:&quot;00000000&quot;}]

My HTML table looks like this:

    &lt;table id=&quot;customer_table&quot;&gt;
         &lt;thead&gt;
             &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Phone&lt;/th&gt;
             &lt;/tr&gt;
         &lt;/thead&gt;
    &lt;/table&gt;

And here is my `document.ready` function:

      $(document).ready(function(){
                //$(&#39;#customer_table&#39;).DataTable();
                $(&#39;#customer_table&#39;).DataTable( {
                    &quot;ajax&quot;: &#39;json&#39;,
                    &quot;dataSrc&quot;: &quot;&quot;,
                     &quot;columns&quot;: [
                        { &quot;data&quot;: &quot;email&quot; },
                        { &quot;data&quot;: &quot;name_en&quot; }
                    ]
                });
      });

The error I am getting is

&gt; Uncaught TypeError: Cannot read property &#39;length&#39; of undefined

DataTables: Cannot read property &#39;length&#39; of undefined

Is there please an option to start the search only after 3 characters have been typed in?

I have written a PHP-script for colleagues displaying 20,000 entries and they complain, that when typing a word, the first few letters cause everything to freeze.

An alternative would be to have the search to be started by a button clicked and not by character typing.

Below is my current code:

    $(&quot;#my_table&quot;).dataTable( {
            &quot;bJQueryUI&quot;: true,
            &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
            &quot;bAutoWidth&quot;: false,
            &quot;aoColumns&quot;: [
                    /* qdatetime */   { &quot;bSearchable&quot;: false },
                    /* id */          null,
                    /* name */        null,
                    /* category */    null,
                    /* appsversion */ null,
                    /* osversion */   null,
                    /* details */     { &quot;bVisible&quot;: false },
                    /* devinfo */     { &quot;bVisible&quot;: false, &quot;bSortable&quot;: false }
            ],
            &quot;oLanguage&quot;: {
                    &quot;sProcessing&quot;:   &quot;Wait please...&quot;,
                    &quot;sZeroRecords&quot;:  &quot;No ids found.&quot;,
                    &quot;sInfo&quot;:         &quot;Ids from _START_ to _END_ of _TOTAL_ total&quot;,
                    &quot;sInfoEmpty&quot;:    &quot;Ids from 0 to 0 of 0 total&quot;,
                    &quot;sInfoFiltered&quot;: &quot;(filtered from _MAX_ total)&quot;,
                    &quot;sInfoPostFix&quot;:  &quot;&quot;,
                    &quot;sSearch&quot;:       &quot;Search:&quot;,
                    &quot;sUrl&quot;:          &quot;&quot;,
                    &quot;oPaginate&quot;: {
                            &quot;sFirst&quot;:    &quot;&amp;lt;&amp;lt;&quot;,
                            &quot;sLast&quot;:     &quot;&amp;gt;&amp;gt;&quot;,
                            &quot;sNext&quot;:     &quot;&amp;gt;&quot;,
                            &quot;sPrevious&quot;: &quot;&amp;lt;&quot;
                    },
                    &quot;sLengthMenu&quot;: &#39;Display &lt;select&gt;&#39; +
                            &#39;&lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;&#39; +
                            &#39;&lt;option value=&quot;20&quot;&gt;20&lt;/option&gt;&#39; +
                            &#39;&lt;option value=&quot;50&quot;&gt;50&lt;/option&gt;&#39; +
                            &#39;&lt;option value=&quot;100&quot;&gt;100&lt;/option&gt;&#39; +
                            &#39;&lt;option value=&quot;-1&quot;&gt;all&lt;/option&gt;&#39; +
                            &#39;&lt;/select&gt; ids&#39;
            }
    } );


  [1]: http://datatables.net/forums/comments.php?DiscussionID=4631

jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

Does anybody know how to show all rows by default in jQuery datatable?

I have tried this code, but it only shows 10 rows by default.

       $(&quot;#adminProducts&quot;).dataTable({
            &quot;aLengthMenu&quot;: [100]
        });

How to show all rows by default in JQuery DataTable

I&#39;m using jQuery DataTables in a project and I would like to know how to disable sorting for the last column. I want to implement this site-wide.

Right now I have the following code:

    &lt;!-- jQuery DataTable --&gt;
		&lt;script src=&quot;../assets/js/plugins/dataTables/jquery.datatables.min.js&quot;&gt;&lt;/script&gt;
		&lt;script&gt;
			/* Default class modification */
			$.extend( $.fn.dataTableExt.oStdClasses, {
				&quot;sWrapper&quot;: &quot;dataTables_wrapper form-inline&quot;
			} );
			
			/* API method to get paging information */
			$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
			{
				return {
					&quot;iStart&quot;:         oSettings._iDisplayStart,
					&quot;iEnd&quot;:           oSettings.fnDisplayEnd(),
					&quot;iLength&quot;:        oSettings._iDisplayLength,
					&quot;iTotal&quot;:         oSettings.fnRecordsTotal(),
					&quot;iFilteredTotal&quot;: oSettings.fnRecordsDisplay(),
					&quot;iPage&quot;:          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
					&quot;iTotalPages&quot;:    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
				};
			}
			
			/* Bootstrap style pagination control */
			$.extend( $.fn.dataTableExt.oPagination, {
				&quot;bootstrap&quot;: {
					&quot;fnInit&quot;: function( oSettings, nPaging, fnDraw ) {
						var oLang = oSettings.oLanguage.oPaginate;
						var fnClickHandler = function ( e ) {
							e.preventDefault();
							if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
								fnDraw( oSettings );
							}
						};
			
						$(nPaging).addClass(&#39;pagination&#39;).append(
							&#39;&lt;ul&gt;&#39;+
								&#39;&lt;li class=&quot;prev disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;&amp;larr; &#39;+oLang.sPrevious+&#39;&lt;/a&gt;&lt;/li&gt;&#39;+
								&#39;&lt;li class=&quot;next disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;&#39;+oLang.sNext+&#39; &amp;rarr; &lt;/a&gt;&lt;/li&gt;&#39;+
							&#39;&lt;/ul&gt;&#39;
						);
						var els = $(&#39;a&#39;, nPaging);
						$(els[0]).bind( &#39;click.DT&#39;, { action: &quot;previous&quot; }, fnClickHandler );
						$(els[1]).bind( &#39;click.DT&#39;, { action: &quot;next&quot; }, fnClickHandler );
					},
			
					&quot;fnUpdate&quot;: function ( oSettings, fnDraw ) {
						var iListLength = 5;
						var oPaging = oSettings.oInstance.fnPagingInfo();
						var an = oSettings.aanFeatures.p;
						var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
			
						if ( oPaging.iTotalPages &lt; iListLength) {
							iStart = 1;
							iEnd = oPaging.iTotalPages;
						}
						else if ( oPaging.iPage &lt;= iHalf ) {
							iStart = 1;
							iEnd = iListLength;
						} else if ( oPaging.iPage &gt;= (oPaging.iTotalPages-iHalf) ) {
							iStart = oPaging.iTotalPages - iListLength + 1;
							iEnd = oPaging.iTotalPages;
						} else {
							iStart = oPaging.iPage - iHalf + 1;
							iEnd = iStart + iListLength - 1;
						}
			
						for ( i=0, iLen=an.length ; i&lt;iLen ; i++ ) {
							// Remove the middle elements
							$(&#39;li:gt(0)&#39;, an[i]).filter(&#39;:not(:last)&#39;).remove();
			
							// Add the new list items and their event handlers
							for ( j=iStart ; j&lt;=iEnd ; j++ ) {
								sClass = (j==oPaging.iPage+1) ? &#39;class=&quot;active&quot;&#39; : &#39;&#39;;
								$(&#39;&lt;li &#39;+sClass+&#39;&gt;&lt;a href=&quot;#&quot;&gt;&#39;+j+&#39;&lt;/a&gt;&lt;/li&gt;&#39;)
									.insertBefore( $(&#39;li:last&#39;, an[i])[0] )
									.bind(&#39;click&#39;, function (e) {
										e.preventDefault();
										oSettings._iDisplayStart = (parseInt($(&#39;a&#39;, this).text(),10)-1) * oPaging.iLength;
										fnDraw( oSettings );
									} );
							}
			
							// Add / remove disabled classes from the static elements
							if ( oPaging.iPage === 0 ) {
								$(&#39;li:first&#39;, an[i]).addClass(&#39;disabled&#39;);
							} else {
								$(&#39;li:first&#39;, an[i]).removeClass(&#39;disabled&#39;);
							}
			
							if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
								$(&#39;li:last&#39;, an[i]).addClass(&#39;disabled&#39;);
							} else {
								$(&#39;li:last&#39;, an[i]).removeClass(&#39;disabled&#39;);
							}
						}
					}
				}
			});
			
			/* Show/hide table column */
			function dtShowHideCol( iCol ) {
				var oTable = $(&#39;#example-2&#39;).dataTable();
				var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
				oTable.fnSetColumnVis( iCol, bVis ? false : true );
			};
			
			/* Table #example */
			$(document).ready(function() {
				$(&#39;.datatable&#39;).dataTable( {
					&quot;sDom&quot;: &quot;&lt;&#39;row&#39;&lt;&#39;span6&#39;l&gt;&lt;&#39;span6&#39;f&gt;r&gt;t&lt;&#39;row&#39;&lt;&#39;span6&#39;i&gt;&lt;&#39;span6&#39;p&gt;&gt;&quot;,
					&quot;sPaginationType&quot;: &quot;bootstrap&quot;,
					&quot;oLanguage&quot;: {
						&quot;sLengthMenu&quot;: &quot;_MENU_ records per page&quot;
					}
				});
				$(&#39;.datatable-controls&#39;).on(&#39;click&#39;,&#39;li input&#39;,function(){
					dtShowHideCol( $(this).val() );
				})
			});
		&lt;/script&gt;

Disable sorting on last column when using jQuery DataTables

Suppose i get empty data from server sometimes, i want to display No Data found message in DataTables?. How is this possible?

How to show empty data message in Datatables

I am working with datatables example and getting an error like this when loading page:
Datatables warning(table id = &#39;example&#39;): cannot reinitialise data table.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.

I was trying to test the fnRowCallback

    &lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=ISO-8859-1&quot;
    pageEncoding=&quot;ISO-8859-1&quot;%&gt;
    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
    &lt;html&gt;
     &lt;head&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    
    &lt;title&gt;DataTables live example&lt;/title&gt;
	&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot; src=&quot;DataTables/media/js/jquery.js&quot;&gt;&lt;/script&gt;
	&lt;script class=&quot;jsbin&quot; src=&quot;http://datatables.net/download/build/jquery.dataTables.nightly.js&quot;&gt;&lt;/script&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      @import &quot;DataTables/media/css/demo_table.css&quot;;
    &lt;/style&gt;
    &lt;/head&gt;
     &lt;body id=&quot;dt_example&quot;&gt;
 	&lt;script&gt;
	$(document).ready(function() {
	    $(&#39;#example&#39;).dataTable();
	} );
	
	$(document).ready( function() {
      $(&#39;#example&#39;).dataTable( {
       &quot;fnRowCallback&quot;: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
         // Bold the grade for all &#39;A&#39; grade browsers
         if ( aData[4] == &quot;A&quot; )
         {
           $(&#39;td:eq(4)&#39;, nRow).html( &#39;&lt;b&gt;A&lt;/b&gt;&#39; );
         }
       }
     } );
     } );
     	&lt;/script&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;h1&gt;Live example&lt;/h1&gt;

      &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Rendering engine&lt;/th&gt;
            &lt;th&gt;Browser&lt;/th&gt;
            &lt;th&gt;Platform(s)&lt;/th&gt;
            &lt;th&gt;Engine version&lt;/th&gt;
            &lt;th&gt;CSS grade&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class=&quot;odd gradeX&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
            &lt;td&gt;Win 95+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt; 4&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;X&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;even gradeC&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;Internet Explorer 5.0&lt;/td&gt;
            &lt;td&gt;Win 95+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;5&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;C&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;odd gradeA&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;Internet Explorer 5.5&lt;/td&gt;
            &lt;td&gt;Win 95+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;5.5&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;even gradeA&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;Internet Explorer 6&lt;/td&gt;
            &lt;td&gt;Win 98+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;6&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;odd gradeA&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;Internet Explorer 7&lt;/td&gt;
            &lt;td&gt;Win XP SP2+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;7&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;even gradeA&quot;&gt;
            &lt;td&gt;Trident&lt;/td&gt;
            &lt;td&gt;AOL browser (AOL desktop)&lt;/td&gt;
            &lt;td&gt;Win XP&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;6&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;gradeA&quot;&gt;
            &lt;td&gt;Gecko&lt;/td&gt;
            &lt;td&gt;Firefox 1.0&lt;/td&gt;
            &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;1.7&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class=&quot;gradeA&quot;&gt;
            &lt;td&gt;Gecko&lt;/td&gt;
            &lt;td&gt;Firefox 1.5&lt;/td&gt;
            &lt;td&gt;Win 98+ / OSX.2+&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;1.8&lt;/td&gt;
            &lt;td class=&quot;center&quot;&gt;A&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;th&gt;Rendering engine&lt;/th&gt;
            &lt;th&gt;Browser&lt;/th&gt;
            &lt;th&gt;Platform(s)&lt;/th&gt;
            &lt;th&gt;Engine version&lt;/th&gt;
            &lt;th&gt;CSS grade&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

What am i doing wrong in this?

Datatables warning(table id = &#39;example&#39;): cannot reinitialise data table

Is there a way with the jquery datatables plugin to hide (and show) a table column?

I figured out how to reload the table data: using `fnClearTable` and `fnAddData`.

But my issue is that in one of my views for the table (e.g. a hidden mode) I don&#39;t want to show certain columns.

jquery datatables hide column

I have an issue with `Datatables`. I also went through [this link][1] which didn&#39;t yield any results. I have included all the prerequisites where I&#39;m parsing data directly into the DOM. Kindly help me to fix this issue. 

**Script**

    $(document).ready(function() {
      $(&#39;.viewCentricPage .teamCentric&#39;).dataTable({
        &quot;bJQueryUI&quot;: true,
        &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
        &quot;bPaginate&quot;: false,
        &quot;bFilter&quot;: true,
        &quot;bSort&quot;: true,
        &quot;aaSorting&quot;: [
          [1, &quot;asc&quot;]
        ],
        &quot;aoColumnDefs&quot;: [{
          &quot;bSortable&quot;: false,
          &quot;aTargets&quot;: [0]
        }, {
          &quot;bSortable&quot;: true,
          &quot;aTargets&quot;: [1]
        }, {
          &quot;bSortable&quot;: false,
          &quot;aTargets&quot;: [2]
        }],
      });
    });

  [1]: http://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

Datatables: Cannot read property &#39;mData&#39; of undefined

I have checked several questions already about this topic here in stackoverflow, but they are all using the old dataTable. I am using DataTable. I populated my DataTable by NOT USING server side, so data are preloaded (JSON) like this : 

    datatable = $(&quot;#datatable&quot;).DataTable({
       data  : myData,
       moreoptions : moreoptions
    });

I didn&#39;t have a problem with that, the DataTable loaded just fine. Now I want to re-populate that `myData` with new data i uploaded. How to reload the DataTable to reflect the changes?

Here&#39;s what I have tried so far :

    $(&#39;#upload-new-data&#39;).on(&#39;click&#39;, function () {
       myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.
    
       datatable.draw(); // Redraw the DataTable
    });

But this doesn&#39;t work. I also tried this :

    datatable = $(&quot;#datatable&quot;).DataTable({
       &quot;data&quot;  : myData,
       &quot;drawCallback&quot; : function () {
          myData = NewlyCreatedData;
       },
       &quot;moreoptions&quot; : moreoptions,
    });

Then on upload I just call the redraw trigger : 

    $(&#39;#upload-new-data&#39;).on(&#39;click&#39;, function () {
       datatable.draw(); // Redraw the DataTable
    });

Still this doesn&#39;t work.

How to redraw DataTable with new data

I&#39;m using the marvellous DataTables jQuery plug-in; http://datatables.net/  Added the FixedColumns and KeyTable extras.

Now the table does resize prettily when the window size is changed. However, the containing div of the table can also be resized in width by a jQuery animation, and I haven&#39;t found a way to resize the table with it-- it just stays stagnant in its original width. Only if I change the div width in the code before pageload, the table is resized correctly.

How can I make the DataTable resize on-the-fly according to both the window width and the containing div width? Thanks in advance! :-)

Datatables on-the-fly resizing

I am implementing datatbales and according to my requirement, most of the things have been resolved except the pagination issue. In my case for every time pagination navigation is displaying. I want to disable the pagination navigation if there is only one page at all.How to do that? My code is like:

**JS**

    &lt;script&gt;
      function fnFilterColumn(i) {

        $(&#39;#example&#39;).dataTable().fnFilter(
          $(&quot;#col&quot; + (i + 1) + &quot;_filter&quot;).val(),
          i
        );
      }
      $(document).ready(function() {


        $(&#39;#example&#39;).dataTable({
          &quot;bProcessing&quot;: true,
          &quot;sAjaxSource&quot;: &quot;datatable-interestdb.php&quot;,
          &quot;bJQueryUI&quot;: true,
          &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
          &quot;sDom&quot;: &#39;T&lt;&quot;clear&quot;&gt;lfrtip&#39;,
          &quot;oTableTools&quot;: {
            &quot;aButtons&quot;: [

              {
                &quot;sExtends&quot;: &quot;csv&quot;,
                &quot;sButtonText&quot;: &quot;Save to CSV&quot;
              }
            ]
          },
          &quot;oLanguage&quot;: {
            &quot;sSearch&quot;: &quot;Search all columns:&quot;
          }


        });


        $(&quot;#example&quot;).dataTable().columnFilter({
          aoColumns: [
            null,
            null,
            null,
            null
          ]
        });


        $(&quot;#col1_filter&quot;).keyup(function() {
          fnFilterColumn(0);
        });

      });
    &lt;/script&gt;

**HTML**

    &lt;table cellpadding=&quot;3&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display userTable&quot; aria-describedby=&quot;example_info&quot;&gt;

      &lt;tbody&gt;
        &lt;tr id=&quot;filter_col1&quot;&gt;
          &lt;td&gt;Interest:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type=&quot;text&quot; name=&quot;col1_filter&quot; id=&quot;col1_filter&quot;&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;


    &lt;table width=&quot;100%&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;2&quot; cellspacing=&quot;1&quot; class=&quot;form_table display&quot; id=&quot;example&quot;&gt;

      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th class=&quot;sorting_asc&quot; width=&quot;25%&quot;&gt;Interest&lt;/th&gt;
          &lt;th width=&quot;25%&quot;&gt;Name&lt;/th&gt;
          &lt;th width=&quot;25%&quot;&gt;Email&lt;/th&gt;
          &lt;th width=&quot;25%&quot;&gt;Contact No&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;

        &lt;tr&gt;
          &lt;td colspan=&quot;4&quot; class=&quot;dataTables_empty&quot;&gt;Loading data from server&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;


    &lt;/table&gt;

disable pagination if there is only one page in datatables

By default, jquery datatable shows 10 by default and has 

options  : **10,25,50,100** 

How can I change these options?

Change values of select box of &quot;show 10 entries&quot; of jquery datatable

The vast majority of the documentation for this plugin indicates that you initialize it with 

    $(&#39;#example&#39;).dataTable();

However http://www.datatables.net/examples/api/multi_filter_select.html initializes using 

    $(&#39;#example&#39;).DataTable();

The resultant objects differ quite a lot, and the example URL above doesn&#39;t work when I initialize with a lower-case &#39;D&#39;, however pretty much everything else *requires* the lower-case &#39;D&#39; initialization.

Can someone please explain to me why there&#39;s a difference, and how to make the two play nice together?  Essentially I need the multi-filter-select functionality, but also need to tack on some other calls / plugins, which don&#39;t seem to like the upper-case &#39;D&#39; initialization.

dataTable() vs. DataTable() - why is there a difference and how do I make them work together?

When using the [Bootstrap integration][1] for DataTables, I see the following error in the console:

&lt;pre&gt;Uncaught TypeError: Cannot read property &#39;defaults&#39; of undefined (dataTables.bootstrap.js:20)&lt;/pre&gt;

This causes the pagination controls to not have styles on them.

I can see that in the factory initialization, the following code needs to run:

    factory( jQuery, jQuery.fn.dataTable );

However, `jQuery.fn.dataTable` is returning `undefined`.

[1]: http://www.datatables.net/manual/styling/bootstrap

DataTables: Uncaught TypeError: Cannot read property &#39;defaults&#39; of undefined

Problem
---
When using the `sScrollX`, `sScrollXInner` and/or `sScrollY` to achieve a fixed header table with its inner content scrolling, the headers of the table go out of alignment with the rest of the body in Chrome and IE. Firefox, on the other hand, displays them perfectly.

Using the version 1.9.4, as far as I can tell, this issue only occurs when there is a lot of data with fluctuating widths, and with words that are very long/unwrappable combined in the same columns as small ones. Also, the table in question needs to be fairly wide.

All these factors are demonstrated in this [fiddle](http://jsfiddle.net/pratik136/etL73/embedded/result/):


Output
---
**Chrome:**  
[![Chrome Screenshot][1]][1]

**IE:**  
[![IE9 Screenshot][2]][2]

**Firefox**  
[![Firefox Screenshot][3]][3]

Suggested Solutions
---

**These solutions have been suggested before but have had no effect** on my implementation. Owing to some of these suggestions, I setup a clean plain vanilla demo as I wanted to ensure that no other code was contributing to this effect.

* turn-off/remove all my css
* `setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );`
* calling `oTable.fnFilter( &quot;x&quot;,0 )` and `oTable.fnFilter( &quot;&quot;,0 )` in that order
* `&quot;sScrollXInner&quot;: &quot;100%&quot;`
* get rid of all widths

The only solution that I found to the misaligned headers was taking out `sScrollX` and `sScrollY`, but this can&#39;t be counted as a solution as you lose the fixed header/inner content scrolling functionality. So sadly it&#39;s a temporary hack, not a fix!

Note
---
To edit/play with the latest [fiddle](http://jsfiddle.net/pratik136/etL73).

I have tried various combinations which can be observed in the revision history of the fiddle by using the link `http://jsfiddle.net/pratik136/etL73/#REV#` where `1 &lt;= #REV# &lt;= 12`

History
---
**StackO**  
This question has been asked before: https://stackoverflow.com/questions/8607290/jquery-datatables-header-misaligned-with-vertical-scrolling  
but the vital difference is that the OP of that question mentioned that they were able to fix the issue if all CSS was removed, which is untrue in my case, and I have tried a few permutations, thus thought the question worthy of a repost.

**External**  
This issue has also been flagged on the DataTables forum: 

* http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
* http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
* http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
* My bug report: http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

This issue has driven me nuts! Please contribute your thoughts!

  [1]: http://i.stack.imgur.com/4530R.png
  [2]: http://i.stack.imgur.com/6oCLs.png
  [3]: http://i.stack.imgur.com/1ONsv.png


All Datatables Solutions on Gang of Coders

Total of 36 Datatables Solutions