如何删除jQuery DataTables插件添加的搜索栏和页脚？

17 回答

• 392

  如果您使用自定义过滤器，您可能想隐藏搜索框但仍想启用过滤功能，因此 bFilter: false 不是这样的 . 请改用 dom: 'lrtp' ，默认为 'lfrtip' . 文件：https://datatables.net/reference/option/dom

  回复于 2024-05-03T14:14:45+08:00
• 1

  一种快速而肮脏的方法是找出页脚的类并使用jQuery或CSS隐藏它：

  $(".dataTables_info").hide();
  

  回复于 2024-05-03T14:14:45+08:00
• 0

  var table = $("#datatable").DataTable({
     "paging": false,
     "ordering": false,
     "searching": false
  });
  

  回复于 2024-05-03T14:14:45+08:00
• 35

  如果你使用themeroller：

  .dataTables_wrapper .fg-toolbar { display: none; }
  

  回复于 2024-05-03T14:14:45+08:00
• 6

  <script>
  $(document).ready(function() {
      $('#nametable').DataTable({
          "bPaginate": false,
          "bFilter": false,
          "bInfo": false
      });
  });
  </script>
  

  在您的数据表构造函数中

  https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

  回复于 2024-05-03T14:14:45+08:00
• 17

  对于 DataTables >=1.10 ，请使用：

  $('table').dataTable({searching: false, paging: false, info: false});
  

  对于 DataTables <1.10 ，请使用：

  $('table').dataTable({bFilter: false, bInfo: false});
  

  或使用纯CSS：

  .dataTables_filter, .dataTables_info { display: none; }
  

  回复于 2024-05-03T14:14:45+08:00
• 3

  查看http://www.datatables.net/examples/basic_init/filter_only.html以获取要显示/隐藏的功能列表 .

  你想要的是将“bFilter”和“bInfo”设置为false;

  $(document).ready(function() {
      $('#example').dataTable( {
          "bPaginate": false,
          "bFilter": false,
          "bInfo": false
                   } );
  } );
  

  回复于 2024-05-03T14:14:45+08:00
• 0

  您也无法通过设置 sDom 来绘制页眉或页脚：http://datatables.net/usage/options#sDom

  'sDom': 't'
  

  将显示表格，没有页眉或页脚或任何东西 .

  这里讨论了一些：http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

  回复于 2024-05-03T14:14:45+08:00
• 0

  在这里，您可以将 sDom 元素添加到您的代码中，隐藏顶部搜索栏 .

  $(document).ready(function() {
      $('#example').dataTable( {
  "sDom": '<"top">rt<"bottom"flp><"clear">'
   } );
  } );
  

  回复于 2024-05-03T14:14:45+08:00
• 4

  这可以通过简单地更改配置来完成：

  $('table').dataTable({
        paging: false, 
        info: false
   });
  

  但要隐藏空的页脚;这段代码可以解决问题：

  $('table').dataTable({
        paging: false, 
        info: false,
  
        //add these config to remove empty header
        "bJQueryUI": true,
        "sDom": 'lfrtip'
  
  });
  

  回复于 2024-05-03T14:14:45+08:00
• 4

  正如@Scott所说，Stafford sDOM 是显示，隐藏或重新定位构成DataTables的元素的最合适的属性 . 我认为 sDOM 现在已经过时了，实际的补丁这个属性现在是 dom .

  此属性允许将一些类或id设置为元素，因此您可以更轻松地使用时尚 .

  在这里查看官方文档：https://datatables.net/reference/option/dom

  此示例仅显示表：

  $('#myTable').DataTable({
      "dom": 't'
  });
  

  回复于 2024-05-03T14:14:45+08:00
• 6

  您可以使用sDom属性 . 代码看起来像这样 .

  $(document).ready(function() {
      $('#example').dataTable( {
          'sDom': '"top"i'
                   } );
  } );
  

  İt隐藏搜索和寻呼机框 .

  回复于 2024-05-03T14:14:45+08:00
• 2

  Just a reminder you can't initialise DataTable on the same <table> element twice.

  如果您遇到相同的问题，那么您可以在HTML <table> 上初始化DataTable时设置 searching 和 paging false

  $('#tbl').DataTable({
      searching: false, 
      paging: false,
      dom: 'Bfrtip',
      buttons: [
         'copy', 'csv', 'excel', 'pdf', 'print'
      ]
   });
  

  回复于 2024-05-03T14:14:45+08:00
• 3

  你可以通过css隐藏它们：

  #example_info, #example_filter{display: none}
  

  回复于 2024-05-03T14:14:45+08:00
• 83

  我通过为页脚分配一个id然后使用css样式来完成此操作：

  <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
       <thead>
          <tr>
              <th></th>
  
          </tr>
      </thead>
   <tfoot>
      <tr>
              <th id="FooterHidden"></th>
      </tr>
  </tfoot>
  <tbody>
  
      <tr>
  
                  <td class="copyableField"></td>
  
      </tr>
   </tbody>
  </table>
  

  然后使用CSS设置样式：

  #FooterHidden{
     display: none;
  }
  

  如上所述，方式对我不起作用 .

  回复于 2024-05-03T14:14:45+08:00
• 0

  我认为最简单的方法是：

  <th data-searchable="false">Column</th>
  

  您只能编辑您必须修改的表，而无需更改常见的CSS或JS .

  回复于 2024-05-03T14:14:45+08:00
• 1

  hello friends you can add simply searching: false in your js
  
  
  
  
  
  $('#companies_grid').DataTable({
          responsive: true,
          searching: false,
          iDisplayLength: 25,
          "ajax": base_url + "companies/company_table",
          "columns": [{
                  "data": "SRNO"
              },
              {
                  "data": "CompanyName"
              },
              {
                  "data": "Country"
              },
              {
                  "data": "CustomDomain"
              },
              {
                  "data": "Email"
              },
              {
                  "data": "Edit"
              }
          ]
      });
  

  回复于 2024-05-03T14:14:45+08:00