Rectangle 27 313

$('table').dataTable({searching: false, paging: false});
$('table').dataTable({bFilter: false, bInfo: false});
.dataTables_filter, .dataTables_info { display: none; }

As good as @antpaw comment is, and seems to work in most cases, it doesn't work if there is filtering going on for each column, like in this example :datatables.net/release-datatables/extras/FixedColumns/ . Be aware!

filter: false

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 76

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );

@Eric thank you its working for me, but i want to show "bPaginate" only i don't want to show "binfo" how i can implement if i did "bInfo" = false and "bPaginate"= true then both are showing

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 15

This functionality is available by default. Most likely the reason for this unusual behavior:

  • you override odd and even classes in your CSS, or

Default styling or jQuery UI or Foundation

Use class display for your <table> as shown below. See Default styling options for a list of all available classes.

<table id="example" class="display" cellspacing="0" width="100%">
table table-striped table-bordered
<table>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

If there is a CSS rule that overrides odd and even classes you can instruct jQuery DataTables to use alternative classes instead with stripeClasses option.

$('#example').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

Can the jquery dataTables plugin respect alternate row colors after so...

jquery sorting jquery-plugins datatables styling
Rectangle 27 14

To archive this you have to use Base style - no styling classes datatable to do this just remove datatable classes from table tag

After this create your own classes for odd (e.g myodd ) and even(e.g myeven ) rows.

now the next task is to apply these classes to the table rows on each table draw means:

2. When limit of visible records is changed etc.

To do this datatabe provides rowCallback() you can use this in this way:

$('#myTabel').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                 $(row).addClass('myeven');
            }
          }
    });
!important
css rule
odd
even
table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}
rowCallback

Can the jquery dataTables plugin respect alternate row colors after so...

jquery sorting jquery-plugins datatables styling
Rectangle 27 30

sDom
'sDom': 't'

will display JUST the table, no headers or footers or anything.

This should be added to antpaw's answer. This affectively hides the filter and info placeholder divs still remaining when passing "bFilter": false, "bInfo": false.

This removes pagination in the footer. I don't think it's a good practice.

It's now called 'dom' and you can controll a lot more with this option. See datatables.net/reference/option/dom

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 5

I found a solution that really do it dynamically $(table.column(1).header()).text('My title'); share|improve this answer answered Apr 6 '15 at 16:06 Vivien Pipo 8212620

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How dynamically change column title of dataTable jQuery p...

javascript jquery datatable datatables
Rectangle 27 15

Click on the "show details" link under Date (dd/mm/YYY), then you can copy and paste that plugin code provided there

Update: I think you can just switch the order of the array, like so:

All I did was switch the __date_[1] (day) and __date_[0] (month), and replaced uk with us so you won't get confused. I think that should take care of it for you.

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

And I've updated my answer ;)... and just as an aside, have you looked at the jQuery tableSorter plugin (tablesorter.com/docs)? It will allow you to sort multiple columns and determines the cell content automatically.

I will check your answer out in a few mins. I actually wa using tablesorter before I switched. I switched because I needed to use the search plugin and from what I found it is extremely hard to dynamically add rows to tablesorter when using the search plugin.

How to sort by Date with DataTables jquery plugin? - Stack Overflow

jquery jquery-plugins datatables
Rectangle 27 6

If you want a javascript solution, you can use the fnInitComplete parameter of datatable.

$(this._stopsTable).dataTable({
    "bJQueryUI": true,
    "bPaginate":false,
    "bLengthChange":false,
    "bFilter":false,
    "bSort":false,
    "bInfo":false,
    "bAutoWidth":false,
    "sScrollY": "100px",
    "aoColumns":[
        { "sTitle":"a" 
           "sTitle":"b" 
           "sTitle":"c" }
    ],
    "fnInitComplete" : function(oSettings, json) {
        // Find the wrapper and hide all thead
        $(this._stopsTable).parents('.dataTables_wrapper').first().find('thead').hide();
    }
});

When jQuery datatable use a scroll, the html structure is very different. jQuery datatables use a "second table" to handle the thead. So you can scroll and look at the thread anytime. So if you want to remove the good thead, you need to retrieve the dataTable wrapper.

Of course, if you do that way for all tables, it will hide all thead of all your tables. So you must use something to know if you must hide the first row for the current table (a css class or an attribute on the table).

thanks but it doesn't work. I put the code as you suggested, but the top raw did not disappear. Also, now I get the warning: "DataTables warning (table id = 'locationsTable'): The table cannot fit into the current element which will cause column misalignment. The table has been drawn at its minimum possible width. ". Maybe something is wrong with the way I initiate the table?

The code should do the same thing as your CSS. It's a weird warning. Can you make a jsfiddle with your code ?

@user1661304 I have done an edit on my response. And added a jsfiddle. Can you try this ? It should work now.

I had some unrelated problem regarding the data table init, and that's why it seems like it doesn't work. Now it is acting as it should. Thanks alot!

javascript - Jquery DataTables plugin - hide columns name row - Stack ...

javascript jquery css jquery-datatables
Rectangle 27 13

If you are using custom filter, you might want to hide search box but still want to enable the filter function, so bFilter: false is not the way. Use dom: 'lrtp' instead, default is 'lfrtip'. Documentation: https://datatables.net/reference/option/dom

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 2

You'll need to distinguish between the pre-loaded rows and the ones that are added dynamically in your js code. A possible solution is to add a custom css class to the dynamically added rows only:

function addRow() {
    var table = $('table#myTable').dataTable();
    table.fnAddData( [
          '<input type="text" name="first_name_' + count + '">',
          '<input type="text" name="last_name_' + count + '">' ] );
    $(table._('tr')[count]).addClass('dynamicRow'); // add the dynamic css class

    count++;
 }

Then in the delete row method, check if the row css classes contain our dynamic one. If that is so, delete the row, otherwise do nothing. Here is the example:

function deleteRow () {
  if (count != 1) {
      var table = $("table#myTable").dataTable();
      if ($(table._('tr')[count - 1]).hasClass('dynamicRow')) {
          table.fnDeleteRow(count - 1);

          count--;
      }
   }
}

Sorry to say, but this would never work and produce errors to the console. You are mixing 1.10.x API with 1.9.x API methods on a dataTable() instance.

Do not be sorry at all - a mistake is a mistake. Actually I am glad you pointed that out, I think the current code should be fine with 1.9. Thanks

Good answer! Was misreading the article and got the impression that it was targeting 1.10.x, so have posted another answer, which is for 1.10.x only. But your updated answer is correct for 1.9.4.

Both the answers are clever.

jQuery datatables delete rows but only the ones which are dynamically ...

jquery datatables jquery-datatables
Rectangle 27 41

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

$("#querydatatablesets").css("width","100%")

I have found this to be the best solution as well, because in my case, the table was also being set to 100px width when any of the columns was made invisible - see here: datatables.net/forums/discussion/3417/

This is the solution that worked for me. it gives finer control over the css of the data table compared to the oTable.fnAdjustColumnSizing(); solution mentioned earlier.

jQuery DataTables: control table width - Stack Overflow

jquery datatables jquery-datatables
Rectangle 27 41

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

$("#querydatatablesets").css("width","100%")

I have found this to be the best solution as well, because in my case, the table was also being set to 100px width when any of the columns was made invisible - see here: datatables.net/forums/discussion/3417/

This is the solution that worked for me. it gives finer control over the css of the data table compared to the oTable.fnAdjustColumnSizing(); solution mentioned earlier.

jQuery DataTables: control table width - Stack Overflow

jquery datatables jquery-datatables
Rectangle 27 6

static hiding with jquery isnt realy good

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 4

As of 2015, the most convenient way according to me to sort Date column in a DataTable, is using the required sort plugin. Since the date format in my case was dd/mm/yyyy hh:mm:ss, I ended up using the date-euro plugin. All one needs to do is:

Step 1: Include the sorting plugin JavaScript file or code and;

Step 2: Add columnDefs as shown below to target appropriate column(s).

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});

* Please note that this plug-in is *deprecated. The * datetime plug-in provides enhanced * functionality and flexibility.

How to sort by Date with DataTables jquery plugin? - Stack Overflow

jquery jquery-plugins datatables
Rectangle 27 4

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

in your datatable constructor

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 11

One of the solutions is to implement scrolling yourself instead of letting DataTables plugin do it for you.

I've taken your example and commented out sScrollX option. When this option is not present DataTables plugin will simply put your table as is into a container div. This table will stretch out of the screen therefore to fix that we can put it into a div with required width and an overflow preperty set - this is exactly what the last jQuery statement does - it wraps existing table into a 300px wide div. You probably will not need to set the width on the wrapping div at all (300px in this example), i have it here so that clipping effect is easily visible. And be nice, don't forget to replace that inline style with a class.

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

Ruslans - this is a great start! Thanks! Could I ask if this solution can be tweaked to allow the sScrollY to be set? At the moment, if that is set, the header understandably displays below the wrapped table.

So what you really want is for table to be scrolled both horizontally and vertically. In that case keep sScrollY and sScrollX properties commented out and just constrain the wrapping div to your required vertical size, e.g. 100px in the following Fiddle: jsfiddle.net/WZrCx

Well, not quite! Using sScrollY, I can achieve a fixed header effect, whereas wrapping it doesn't.

@RuslansUralovs: I find you last solution more efficient than one provided by DataTables. In case when table is set as some percentage from window width (90%) and window is resized so that both vertical and horizontal scrolling is needed, DataTables header starts to fall over. The only luxury which I cannot afford is duplication of data. Unfortunately some of the tables I have might be very big, so having DOM doubled is unaffordable. I'll try to implement the solution when "table with header" has no body, but on window resize the widths of the columns are copied from "table with body".

jquery - DataTables fixed headers misaligned with columns in wide tabl...

jquery datatables
Rectangle 27 11

One of the solutions is to implement scrolling yourself instead of letting DataTables plugin do it for you.

I've taken your example and commented out sScrollX option. When this option is not present DataTables plugin will simply put your table as is into a container div. This table will stretch out of the screen therefore to fix that we can put it into a div with required width and an overflow preperty set - this is exactly what the last jQuery statement does - it wraps existing table into a 300px wide div. You probably will not need to set the width on the wrapping div at all (300px in this example), i have it here so that clipping effect is easily visible. And be nice, don't forget to replace that inline style with a class.

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

Ruslans - this is a great start! Thanks! Could I ask if this solution can be tweaked to allow the sScrollY to be set? At the moment, if that is set, the header understandably displays below the wrapped table.

So what you really want is for table to be scrolled both horizontally and vertically. In that case keep sScrollY and sScrollX properties commented out and just constrain the wrapping div to your required vertical size, e.g. 100px in the following Fiddle: jsfiddle.net/WZrCx

Well, not quite! Using sScrollY, I can achieve a fixed header effect, whereas wrapping it doesn't.

@RuslansUralovs: I find you last solution more efficient than one provided by DataTables. In case when table is set as some percentage from window width (90%) and window is resized so that both vertical and horizontal scrolling is needed, DataTables header starts to fall over. The only luxury which I cannot afford is duplication of data. Unfortunately some of the tables I have might be very big, so having DOM doubled is unaffordable. I'll try to implement the solution when "table with header" has no body, but on window resize the widths of the columns are copied from "table with body".

jquery - DataTables fixed headers misaligned with columns in wide tabl...

jquery datatables
Rectangle 27 27

var addId = $('#mimicTable').dataTable().fnAddData([
  alarmID,
  'col2',
  'col3',
  'col4',
  'col5'
]);

var theNode = $('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr;
theNode.setAttribute('id','alarmNum' + alarmID);

addId is defined just above. From the documentation, fnAddData returns an array of integers, representing the list of indexes in aoData that have been added to the table. As we are only adding one row, then it is returning the index added.

javascript - jQuery DataTables: How do I add a row ID to each dynamica...

javascript jquery datatables
Rectangle 27 3

if you are using themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables
Rectangle 27 3

Here you can add to sDom element to your code, top search bar is hidden.

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

html - How can I remove the search bar and footer added by the jQuery ...

jquery html datatables