如何编辑数据表按钮的位置？

Question

I got one problem, the page button of my datatables out of line. I used SB admin templates (bootstrap). I tried to edit my datatables function, but it's not working. I tried to JSFiddle in this function but its not work to.

My datatables's button

I want my datatables like this :

I want like this

I tried to edit my function, and this is my datatables's function :

<script>
    $('#datatables').dataTable
        ({  
            "sScrollX": "200%", //This is what made my columns increase in size.
            "bScrollCollapse": true,
            "sScrollY": "800px",

            "bAutoWidth": false,
            "aoColumns": [
                { "sWidth": "5%" }, // 1st column width 
                { "sWidth": "null" }, // 2nd column width 
                { "sWidth": "70%" }, // 3rd column width
                { "sWidth": "null" }, // 4th column width 
                { "sWidth": "null" }, // 5th column width 
                { "sWidth": "40%" }, // 6th column width
                { "sWidth": "null" }, // 7th column width 
                { "sWidth": "null" }, // 8th column width 
                { "sWidth": "null" }, // 9th column width
                { "sWidth": "35%" }, // 10th column width
                { "sWidth": "35%" }, // 11th column width
                { "sWidth": "null" }, //12
                { "sWidth": "null" }, //13
                { "sWidth": "null" }, //14
                { "sWidth": "null" }, //15
                { "sWidth": "null" }, //16
                { "sWidth": "15%" } //17
                ],

            "bPaginate": true,            
            "sDom":'<"H"lCfr>t<"F"ip>',
            //"sDom": '<"search"f><"top"l>rt<"bottom"ip><"clear">',
            "sPaginationType":"full_numbers",
            "aaSorting":[[0, "asc"]],
            "bJQueryUI":true    

        });
</script>

I tried to edit my sDom but it's not work to. I used codeigniter framework for this project. Please help. Thanks.

Answer 1

You can change data tables "sDom" options to use bootstrap class so that it fits the page width. You can try also by changing grid class combination like col-md-3,col-md-3 and col-md-6 or any other :

{
    "sDom": '<<"col-md-4"f><"col-md-4"l><"col-md-4"i>><trp>'
}
OR
{
    "sDom": '<<"col-md-3"f><"col-md-3"l><"col-md-6"i>><trp>'
}