Javascript DataTables-使其可拖动的自定义div会导致“长度”菜单消失

我正在使用一个服务器端数据表（1.10.21）来显示大量数据，因此我需要使其能够正确显示所有结果。 我发现一些选项可以完成这项工作，但会使“长度”菜单“选择”消失（选择要显示的每页记录数的位置）。 在文档和一些论坛之后，我尝试添加一些选项使其再次可见，但没有结果。 如果我把x-Dragable部分注释掉，lenght菜单又恢复了活力。 任何帮助都将不胜感激。 以下是我的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

//呈现数据表
var dataTable=$（'#data_table'）。dataTable（{
//可拖动部件
//使用box创建容器div并作为类拖动
dom：“Bfrip”，
initComplete:函数（）{
//可拖动的片段
mx=0；
$（“.drag”）。打开({
mousemove:function（e）{
var mx2=e.pageX-this.offsetLeft；
如果（mx）this.scrollLeft=this.sx+mx-mx2；
},
mousedown：函数（e）{
this.sx=this.slollLeft；
mx=e.pageX-this.offsetLeft；
}
});
$（document）.on（“mouseup”，function（）{
mx=0；
});
},
“处理”：对，
“服务器端”：正确，
“语言”：{
“sUrl”：“datatables/意大利语.txt”，
},
“ajax”：{
“url”：“datatables/extraction.php”，
“数据”：功能（d）{
返回$.extend（{}，d{
“筛选器”：$（“#筛选器_状态”）.val（），
“type”：$（'#filter_type'）.val（），
“cat”：$（'#filter_cat'）.val（），
“标签”：标签，
} );
}
//端部X-可拖动部件
},
“columnDefs”：[
{className:“文本中心”，“目标”：[3,4,8,9,10]}，
{className:“nowrap”，“targets”：[8,9]}，
{“orderable”：false，“targets”：[0,7,10]}，
{“宽度”：“30px”，“目标”：0}，
],
订单：[[1，'说明']]，
…其他东西。。。
}); // 结束数据表

下面是插件如何呈现出表格顶部的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>

可视化
10
25
50
100
元素
Cerca：

与：

Cerca：

我放弃后，偶然发现了答案。 一切都是由“dom”属性的定义造成的，该属性排除了页面长度按钮。 因此：

dom:“Bfrip”，

必须更改为：

dom:“Blfrip”，

刚才添加了一个“l”，如Datatables文档所示：

---

我放弃后，偶然发现了答案。 一切都是由“dom”属性的定义造成的，该属性排除了页面长度按钮。 因此：

dom:“Bfrip”，

必须更改为：

dom:“Blfrip”，

刚才添加了一个“l”，如Datatables文档所示：

<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>