【问题标题】:Replace default search box with custom search box用自定义搜索框替换默认搜索框
【发布时间】:2018-11-14 07:10:48
【问题描述】:

我正在使用 jQuery DataTables,我在输出中显示了两个搜索框,但我只想显示自定义搜索框。

如何隐藏默认的 DataTables 搜索框?

只需要自定义搜索框。

HTML

<div class="tab-inn">
   <div class="table-responsive table-desi">
       <table class="table table-hover">
           <thead>
              <tr>
                  <th>ID</th>
                  <th>Part Number</th>
                  <th>Bid</th>
                  <th>Model</th>                                          
              </tr>
          </thead>
          <tbody>

           <?php while ($row = mysql_fetch_array($r_query)){ ?>
               <tr>
                 <td><?php echo $row['id']; ?></td>
                 <td><?php echo $row['partnumber']; ?></td>
                 <td><?php echo $row['bid']; ?></td>
                 <td><?php echo $row['model']; ?></td>
               </tr>
            <?php   } ?>
      </table>
   </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />

JavaScript

<script> 
   $(document).ready(function (){
       var table = $('table').DataTable({
            dom: 'Bfrtip',
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print','pageLength']
       });

       $('#mySearch').on('keyup redraw', function() {
            var searchString = '(' + $('#mySearch').val().split(' ').join('|') + ')';

            table.search(searchString, true).draw(true);
       });
    });

</script>

【问题讨论】:

  • ID为mysearch的字段在哪里?
  • 您可以使用$('MySelector').hide(); 来隐藏带有jQuery 的元素。如果您想自动执行此操作,您可以将其集成到 document.ready 块中,或者将其与您希望拥有该功能的相关功能集成。恐怕您的问题措辞/结构不佳,无法提供更多信息。

标签: javascript jquery datatables


【解决方案1】:

从dom 选项的值中排除f(代表filtering)。

例如:

dom: 'Brtip'

有关更多信息,请参阅dom 选项的官方文档。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-28
    • 1970-01-01
    • 2013-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-13
    相关资源
    最近更新 更多