douhuan4699 2015-11-18 00:36 采纳率: 100%
浏览 50

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

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.

  • 写回答

1条回答 默认 最新

  • dongwuge6201 2015-11-18 05:05
    关注

    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>'
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名