CODEWITHSUNDEEP
jquerydatatables
user3742125
user3742125

Reputation: 627

How to customize datatable to move the pagination info

Is there any way to move the pagination info like "Show entries" in place of search box by removing the search box. Also I need to move another pagination info like "showing 1 to 2 of 2 entries" to the left side of "show entries".I have shown this in the attached image.

My fiddle is here at http://jsfiddle.net/inDiscover/56d1t0jt/.

Html

<table id="myTable">
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>data2</td>
            <td>data2</td>
            <td>data2</td>
        </tr>       
    </tbody>
</table>

JS code

$(document).ready(function(){
    $('#myTable').dataTable();
});

details_to_move_pagination_info_shown_HERE

Upvotes: 0

Views: 4131

Answers (1)

Ivar
Ivar

Reputation: 6848

I think what you are looking for, is the sDom option. This allows you to show or hide specific fields, and to determine where and in what order they are shown:

$(document).ready(function(){
    $('#myTable').dataTable({"sDom": '<"H"ilr><"clear">t<"F"p>' });
});

<"H"ilr> means that the i(information), l(length changing) and r(processing) should be in the header.

<"clear"> means that an HTML element with the class clear is placed there. (otherwise the table is misplaced). Then the t is the actual table, and after that the <"F"p> means that the p (pagination) is placed in the footer.

http://jsfiddle.net/56d1t0jt/2/

I also added some CSS, to align the "Show * entries" to the right properly.

#myTable_length {
    float: right;
    text-align: right;
}

Upvotes: 3

Related Questions