如何为数据表搜索栏创建特定的html结构? [英] How to create a specific html structure for datatables search bar?

问题描述

我正在尝试将此结构添加到搜索栏中:

I'm trying to add this structure to the searchbar:

<div class="app-search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search...">
      <span class="mdi mdi-magnify"></span>
      <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Search</button>
      </div>
    </div>
  </form>
</div>

实际上我试图将此代码添加到我的datatables:

Actually I tried to add this code to my datatables:

$("#example-datatable").DataTable({
    keys: !0,
    "dom": '<"input-group"f><"#toolbar.dt-box">lrtip',

但是结果是完全错误的，如您从 JSFIDDLE 所看到的.

but the result is completely wrong as you can see from this JSFIDDLE.

最终结果应该是这样:

我做错了什么?

推荐答案

我无法解释您的代码中有什么问题，但是我可以分享我的解决方案.我希望它能带您找到正确的解决方案.

I am not able to explain what is wrong in your code, but I can share my solutions for this. I hope it will drive you to the right solution.

通过将其添加到表对象中，您可以删除输入之前的搜索:"

By adding this to your table object, you are able to delete "Search:" before the input:

let table = $('#example').DataTable( {
 language: { search: "" }
});

您可以运行此功能以更改输入的占位符:

You can run this function to be able to change the input's placeholder:

$('.dataTables_filter input').attr("placeholder", "SEARCH");

您还可以使用此功能替换所有输入元素:

You can also replace all input element using this function:

$('.dataTables_filter label').html('<input type="search" class="" placeholder="I am the new input" aria-controls="example">');

https://jsfiddle.net/0da982ue/9/

这篇关于如何为数据表搜索栏创建特定的html结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！