将默认搜索框替换为自定义搜索框

时间:2018-11-14 07:10:48

标签: javascript jquery datatables

我正在使用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>

1 个答案:

答案 0 :(得分:0)

dom选项的值中排除f(代表f过滤)。

例如:

dom: 'Brtip'

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