DataTable paging at top and bottom of table

bczm8703

I managed to add the paging control at the top and bottom of the table by specifying to dom option. i would like to check how do I shift the paging to be outside of the horizontal scrollbar or make the paging control follow the scrolling

Code

<script>
$("document").ready(function () {
if ($('#<%= gvLevel3Data.ClientID %>').is(":visible")) {
                if ($.fn.dataTable.isDataTable('#<%= gvLevel3Data.ClientID %>')) {
                    table = $('#<%= gvLevel3Data.ClientID %>').DataTable();
                 }
                 else {
                     table = $('#<%= gvLevel3Data.ClientID %>').DataTable({
                        order: [[1, 'desc']],
                        "columnDefs": [
                            { "orderable": false, "targets": [0] },
                        ],
                        "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>'
                    });
                    //table.columns.adjust().draw();
                }
            }
});
</script>

Current design

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

bczm8703

hi, i have did a test case using some of the sample data

colin

The easiest way would be to put the scroll within the table use scrollX - see example here.

The other option would be to detach() the paging element and insert elsewhere - this example is doing something similar with the Excel button,

Colin

bczm8703

hi thanks for the reply. for scrollX is it possible for it to have a horizontal scroll at the top and bottom of the table. i tried it with jquery doublescroll but it is not working.

bczm8703

hi. i manage to achieve my requirement using the detach() method specify above. Apologoy I pressed too fast on the "No" for the Is this the answer thing.