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

【问题标题】：DataTables - Custom div to make it draggable causes length menu disappearDataTables - 自定义 div 使其可拖动导致长度菜单消失
【发布时间】：2020-12-08 09:08:35
【问题描述】：

我正在使用显示大量数据的服务器端 DataTable (1.10.21)，因此我需要将其设置为可拖动以正确显示所有结果。我发现了一些可以完成这项工作的选项，但会使长度菜单选择消失（选择您选择每页要显示多少条记录的选择）。我尝试添加选项以使其在文档和一些论坛之后再次可见，但没有结果。如果我注释掉 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

这是插件如何渲染出表格顶部的 div，其中选择应该与 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>

【问题讨论】：

标签： javascript html datatable datatables draggable

【解决方案1】：

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

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

必须改成：

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

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

【讨论】：