DataTables

Question

我正在使用显示大量数据的服务器端 DataTable (1.10.21)，因此我需要使其可 x 拖动以正确显示所有结果。我找到了一些可以完成工作但使长度菜单 select 消失的选项（select，您可以在其中选择每页要显示的记录数）。我尝试添加选项以使其在文档和一些论坛之后再次可见，但没有结果。如果我注释掉 x-draggable 部分，则长度菜单会再次恢复生机。任何帮助，将不胜感激。这是我的 DataTable 脚本：

// render DataTable
var dataTable = $('#data_table').DataTable( {  
  // X-DRAGGABLE PART
  // Create a container div with box and drag as classes
  dom: "Bfr<'box drag't>ip",
  initComplete: function () {
    // Draggable snippet
    mx = 0;
    $(".drag").on({
      mousemove: function(e) {
        var mx2 = e.pageX - this.offsetLeft;
        if(mx) this.scrollLeft = this.sx + mx - mx2;
      },
      mousedown: function(e) {
        this.sx = this.scrollLeft;
        mx = e.pageX - this.offsetLeft;
      }
    });
    $(document).on("mouseup", function(){
      mx = 0;
    });
  },

  "processing": true,
  "serverSide": true,
  "oLanguage": {
      "sUrl": "datatables/italian.txt",                   
      },
  "ajax": {
    "url":"datatables/extraction.php",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "filter": $('#filter_status').val(),
        "type": $('#filter_type').val(),
        "cat": $('#filter_cat').val(),
        "tag": tag,
      } );
    }
    // END X-DRAGGABLE PART
  },
  "columnDefs": [
    { className: "text-center", "targets": [ 3,4,8,9,10 ] },
    { className: "nowrap", "targets": [ 8,9 ] },
    { "orderable": false, "targets": [ 0,7,10 ] },
    { "width": "30px", "targets": 0 },
  ],
  order: [[1, 'desc']],

  ...other stuff...

}); // END DATATABLE

以下是插件如何在 table 顶部呈现 div，其中 select 应该与 X-Draggable 部分一起使用和不使用 X-Draggable 部分。

没有：

<div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="dataTables_length" id="data_table_length">
      <label>Visualizza 
        <select name="data_table_length" aria-controls="data_table" class="custom-select custom-select-sm form-control form-control-sm">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select> elementi
      </label>
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <div id="data_table_filter" class="dataTables_filter">
      <label>Cerca:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="data_table"></label>
    </div>
  </div>
</div>

与：

<div id="data_table_filter" class="dataTables_filter">
 <label>Cerca:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="data_table"></label>
</div>

Answer 1

我放弃后偶然发现了答案。一切都是由排除页面长度按钮的“dom”属性的定义引起的。所以这个：

dom: "Bfr<'box drag't>ip",

必须改成：

dom: "Blfr<'box drag't>ip",

刚刚添加了一个“l”，如此处的 Datatables 文档所示： https://datatables.net/reference/option/dom

DataTables - 自定义 div 使其可拖动导致长度菜单消失

DataTables - Custom div to make it draggable causes length menu disappear

html

javascript

datatable

draggable