How to fixed position of Search and Pagination?

mastersuse

I have more than 10 columns and need to scroll right the table. Unfortunately, the Search and Pagination position is following not be sticky. How to fixed the position at default position (right top for Search, right bottom for Pagination).

<div class="table-responsive">
    <table id="viewTable" class="hover row-border compact stripe order-column" style="width:100%">
        <thead>
            <tr>
                <th class="text-center">Column 1</th>
                <th class="text-center">Column 2</th>
                ....
                <th class="text-center">Column 11</th>
                <th class="text-center">Column 12</th>
            </tr>
        </thead>
    </table>
</div>

$('#viewTable').DataTable({
    ajax: { 
        url: url_api,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: false,
        processData: true,
    },
    dom: 'Bfltip',
    buttons: [
        { extend: 'excelHtml5' },
        { extend: 'pdfHtml5' },
        { extend: 'print' }
    ],
    destroy: true,
    columns: [
        { data : "column_1" },
        { data : "column_2" },
        ....
        { data : "column_11" },
        { data : "column_12" }
    ],
});

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

mastersuse

here is the example, the search box and pagination is following while user scrolling to the right. both should be fixed at the default position.

live.datatables.net/dulofabi/1/edit

colin

Ah, I see, thank you for the test case. You can use scrollX, see here.

Hopefully that will do the trick,

Colin

mastersuse

Thank you. it solve my problem.

mastersuse

Unfortunately, after I apply scrollx: true, another problem happen which is header is not follow the specific column. why this happen?

Apply scrollx: true

should be like this. Not apply scrollx: true

colin

Can you update my example above to demonstrate that, please.

Colin