如何重新排列 DataTables 控件 [英] How to rearrange DataTables controls

问题描述

我想重新排列数据表元素的位置，还想添加一个按钮

我尝试了以下代码

 $('#tblLocations').DataTable({scrollY: '45vh',目标:'无排序'，bSort:真，命令: []，列定义:[{ 可订购:假，目标:-1}，{ "className": "dt-center", "targets": "_all";}],dom": 'l <拉右"f><工具栏">提示'});$("div.toolbar").html(<button class=\"btn btn-info\"onclick=\"metroDialog.open('#AddLocationModel')\>添加位置<;/button>");activateMenuButton(btn_locations");}});

}

但上面代码的输出是

Hi I want to rearrange the positions of elements of datatables and also want to add one button

I tried following code

  $('#tblLocations').DataTable({
            scrollY: '45vh',
            targets: 'no-sort',
            bSort: true,
            order: [],
            columnDefs: [
                { orderable: false, targets: -1 },
                { "className": "dt-center", "targets": "_all" }
            ],
            "dom": 'l <"pull-right"f> <"toolbar"> tip'
        });
        $("div.toolbar").html("<button class=\"btn btn-info\" onclick=\"metroDialog.open('#AddLocationModel')\">Add Location</button>");
        activateMenuButton("btn_locations");
    }

});

}

but the output is of above code is this

but I want the output to be like this

解决方案

Using the DataTables dom option, as you do, is a good approach.

You can use a solution similar to the one shown in this answer, but with some differences.

The solution:

I use these CSS styles:

div.dt-top-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

div.dt-center-in-div {
  margin: 0 auto;
}

div.dt-btn-container {
  margin: 0 0 0 auto;
}

I use the dom option as follows:

dom: '<"dt-top-container"<l><"dt-center-in-div"f><"dt-btn-container"B>r>tip',

This places the three controls above the table into three separate divs. There is also a surrounding div which controls the grid layout for these divs.

The styles then ensure the left/center/right spacing for the controls.

Note that this uses the B option which is for DataTables buttons. But the good news here is: You do not need to import any of the DataTables buttons libraries. Just using the B is a convenient way to give us that third (empty) div on the right hand side, into which we can then place our custom button (similar to your approach):

$("div.dt-btn-container").html("<button class=\"btn btn-info\" onclick=\"metroDialog.open('#AddLocationModel')\">Add Location</button>");

The end result looks like this:

这篇关于如何重新排列 DataTables 控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！