Jquery Datatable theme Hide header/footer balk

Question

I am trying to remove the header/footer balk of this table

Picture of what I am trying to remove:

Answer 1

via js:

$(document).ready(function() {
    var oTable = $('#tableSmooth').dataTable({
        "bFilter" : false, 
        "bJQueryUI" : true, 
        "sPaginationType" : "full_numbers", 
        "bPaginate": false,
        "bInfo": false
    });
});

or via css:

/* these classes are generated by 'jquery.dataTables.js' */

.dataTables_length, 
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    display:none;
}

JSFIDDLE

Answer 2

I am not familiar with jquery but shouldn't you just set style="display: none;" or style="visibility: hidden;" or remove it with the DOM by using removeChild (normal javascript). And maybe you could use first and last sibling to select header and footer (just a bunch of ideas, sorry to do it this way can't comment yet :)

Answer 3

Hide the pagination with:

 $(document).ready(function() {
  var oTable = $('#tableSmooth').dataTable({
      "bFilter": false, //Disable search function
      "bJQueryUI": true, //Enable smooth theme
      "sPaginationType": "full_numbers", //Enable smooth theme
      "bPaginate": false //hide pagination
  });
});

hope this helps!

Answer 4

$('tfoot').remove();

Removes the footer row. Which is something I was stumped by for some time.

Answer 5

You can set bJQueryUI to false, this will take out the balk part of header and footer.

$(document).ready(function() {
    var oTable = $('#tableSmooth').dataTable({
    "bFilter": false, //Disable search function
     "bJQueryUI": false, //Enable smooth theme
    "sPaginationType": "full_numbers" //Enable smooth theme
    });
});

Answer 6

I am not able to view the image, But I am assuming that you want only to display the table and remove the search,paging and info features..

Add the following attribute in the dataTable declaration

"sDom": 't'

Some thing like this

$(document).ready(function() {
    var oTable = $('#tableSmooth').dataTable({
    "bFilter": false, //Disable search function
     "bJQueryUI": true, //Enable smooth theme
        "sPaginationType": "full_numbers", //Enable smooth theme
        "sDom": 't'
    });
    });

To get Back replace t with lfrtip

"sDom": 'lfrtip'

To display some of the features use it as

"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'

l= Length changing

f= Filtering input

r= pRocessing

t= Table

i= Info

p= Pagination

Have a look at dataTables sDom Options for more details