时间戳

首页 > 解决方案 > 数据表 id 默认按钮

datatables - 数据表 id 默认按钮

问题描述

我正在使用数据表，并且以这种方式构建了我的代码：

  table = $('#examples').DataTable({
    "ajax": {
        type: "POST",
        url: "./../../" + "/back-end/switch-ajax-listening/switch-ajax-listening.php",
        dataType: "json",
        data:
            {
                actionId: "page1GetAll"
            }

    },
    responsive: true,
    

    "columns": [
        { "data": "idSelectPacketName"},
        { "data": "idSelectCompany" },
        { "data": "idSelectDesigner1" },
        { "data": "idSelectDesigner2" },
        { "data": "idSelectDesigner3" },
        { "data": "idSelectDesigner4" },
        { "data": "idSelectDesigner5" },
        { "data": "idSelectManufacturer" },
        { "data": "idSelectorProductSector" },
        { "data": "idSelectorProductionYear" },
        { "data": "idSelectorNation" },
        { "data": "idSelectorTypology" },
        { "data": "idHeightInput"},
        { "data": "idLengthInput" },
        { "data": "idVolumeInput" },
        { "data": "idWeightInput" },
        { "data": "nameOutMouseOrImage1" },
        { "data": "nameOverMouseOrImage2" },
        {"data":null,"defaultContent":"<button>View</button>"}

    ],
});

var buttons = new $.fn.dataTable.Buttons(table, {

    "buttons": [

        {
            extend: 'colvis',
            postfixButtons: [ 'colvisRestore' ],
            container : '#colvis',
            columns: '0,1,2,3,4,5'
        },
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ],
}).container().appendTo($('#buttons'));

$('div.dataTables_filter').appendTo('#buttons');

$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');

它工作得很好，但我需要使用 id 移动一些元素。事实上，在我的代码末尾，我已经使用它们的 id 在新 div 中移动了一些元素，但我无法找到所有的 id。更多详细信息，我找不到此 ID：

我用橙色和蓝色表示。

你有什么想法他们的 id 名称是什么？

标签： datatables

解决方案

我猜你正在寻找 Datatable dom 定位

您可以按任何顺序放置每个组件，如下所示

$('#example').DataTable( {
    "dom": '<"top"i>rt<"bottom"flp><"clear">'
});

变量在哪里

l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing

你可以改变irtflp你想要的顺序

更多细节在这里

推荐阅读