Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery Datatable theme Hide header/footer balk

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

Picture of what I am trying to remove: enter image description here

The Jquery code of this table:

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

Hope someone can help!

like image 909
user2911924 Avatar asked Jan 10 '14 15:01

user2911924


2 Answers

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

like image 106
Sangeet Menon Avatar answered Nov 13 '22 23:11

Sangeet Menon


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

like image 1
maco Avatar answered Nov 13 '22 21:11

maco