dataTable自定义搜索框位置

最新推荐文章于 2021-01-17 02:02:41 发布
最新推荐文章于 2021-01-17 02:02:41 发布
阅读量6.4k 收藏
点赞数
分类专栏： dataTable 文章标签： filter搜索框位置自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27815133/article/details/82287082
版权

其实不能叫自定义位置

dataTable 的搜索框 请参阅dataTable dom：http://www.datatables.club/reference/option/dom.html

我的需求是将dataTable 默认位置的搜索框移动到我的form表单中的搜索位置 如图：

因为自己不会写前端却要写前端

幸得群里大神指点 在页面写样式覆盖原来的样式

在这里记录一下解决办法

 .dataTables_filter{
                     margin-top:-95px;//上移
                    }

这样写之后 需要注意 搜索框所在的div的大小，有可能会挡住其他的输入框按钮什么的 所以我定义了一下宽度和右浮动

width:200px;
float:right

 

玻璃渣渣瓶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datatable框架表格生成
08-22
当接收到JSON格式的数据后，`datatable`框架可以自动将其转换为可视化的表格，并且这个过程支持自定义配置。 描述中提到的“根据json表格自动生成排序分页，可自定义每页显示的条数”，这意味着`datatable`框架具备...
Jquery dataTable显示指定列
08-09
在用户选择列之后，我们需要监听复选框的改变事件，并更新`dataTable`的列可见性。这可以通过`column().visible()`方法完成。 ```javascript $('#columnSelector').on('change', '.checkbox', function() { var ...
dataTable 自定义搜索条件
秋风伴落叶
07-03 7762
输入一组范围：                                最小年龄:                                            最大年龄:                                                                 Name         Position         Office
dataTable 改变搜索框位置
@前端学前班（同抖音）
07-12 9989
dataTable 改变搜索框位置
datatable 自定义搜索框 + 汉化
james_laughing的博客
04-07 3034
HTML <input type="text" id="my_news_search" class="" placeholder="搜索站内新闻"> <button class="" id="my_news_search_btn" type="button">搜索</button> JS <script> $(document)....
datatables 添加时间按钮_datatables按钮和搜索框位置
weixin_27744023的博客
01-17 525
嗨，我使用数据表和使用引导样式。任何人都可以告诉我如何为我的按钮和搜索框实现这种布局？ (我使用Adobe Photoshop来产生这种观点)datatables按钮和搜索框位置 我试图改变DOM的JavaScriptvar table = $('#dataTables-example').DataTable({dom: 't',select: true,scrollY: '80vh',scrol...
创建一个DataTable,并为之添加数据(自定义DataTable)
zhu58252601的博客
10-10 1万+
创建一个DataTable,并为之添加数据(自定义DataTable) DataTable dt=new DataTable(“cart”); DataColumn dc1=new DataColumn(“prizename”,Type.GetType(“System.String”)); DataColumn dc2=new DataColumn(“point”,Type.GetType(“Sy...
DataTable插件
10-29
此外，可以通过内置的搜索框进行全局数据过滤。 4. **分页** DataTables支持分页功能，可以设置每页显示的数据量。例如，每页显示10条记录： ```javascript $('#example').DataTable({ pageLength: 10 }); ``...
datatable+bootstrap
04-02
1. **DataTable插件基础**：DataTable提供了一种灵活的方式来展示和操作表格数据，包括排序、搜索、分页等功能。它可以通过JavaScript对象进行初始化，设置各种配置项，如列定义、数据源等。 2. **Bootstrap集成**...
dataTable.zip
03-27
4. **自定义DataTable**: 自定义DataTable通常涉及修改默认的样式、行为或功能，以适应特定项目的需求。这可能包括调整列宽、自定义排序图标、添加自定义过滤器，甚至集成API进行动态数据加载。 5. **解决缺点**: ...
jquery datatables如何去掉搜索框和每页显示多少条数据
热门推荐
猿子
05-24 4万+
$(function(){ $('#dyntable2').dataTable({ searching : false, //百度上的方法，但是我用这没管用 sDom : '"top"i', //这种方法可以 }); });
DataTable搜索框、分页、页脚数据显示、显示数据多少的属性设置
Bambi12的博客
08-30 1万+
DataTable搜索框、分页、页脚数据显示、显示数据多少的属性设置
如何设置datatable的宽度
weixin_34148456的博客
11-27 4333
本文为博主原创，未经允许不得转载： datatable插件具有很好的自动适应性，在大多数情况下可以自适应，完美的展示列表内容。 实现其自适应的其特性为："bAutoWidth": true,//自动宽度，默认的属性为true。 如果要修改其宽度，必须先将其设置为false，才可以修改起作用。 "bAutoWidth": false,//自动宽度。 应用截图：  ...
关于 Jquery Datatables 分页插件如何摆在左下角
TroyLemon的专栏
01-23 1万+
DataTables 是一款非常强大的 Tables 组件，它依赖 Jquery。     官网是：http://www.datatables.net/     中文网：http://dt.thxopen.com/。     官网似乎访问速度相当的慢，请自行翻墙或者通过 VPN 访问。      关于分页插件的位置摆放大家可以参考这里：http://www.data
JQuery Datatables 控件的搜索框/显示分页的样式,有滚动条保持固定
你好邱林和的专栏
10-25 7891
使用了JQuery datatables的表格控件,但发现表格的列名太多了,会有滚动条,导致搜索框和显示的分页都随着滚动条一起右移了,这样不太人性化,所以需要重新设置这些插件的样式,参考如下内容:       $(document).ready(function() { $('#example').dataTable({ "sDom":'>rt>' }); })
datatable js 按列筛选_datatable 自定义筛选
最新发布
05-26
datatable 是一个非常流行的 jQuery 插件，用于在 Web 应用程序中处理大量数据。它允许您快速、轻松地创建复杂的数据表格，并提供了许多功能，如排序、分页、过滤和搜索。在 datatable 中，可以使用内置的搜索框进行全局搜索，但是如果您需要按列筛选，则需要自定义筛选器。 下面是一个简单的示例，演示如何在 datatable 中按列筛选： ```html <!DOCTYPE html> <html> <head> <title>Datatable Column Filters</title> <!-- 引入必要的CSS和JS文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <!-- 自定义筛选器 --> <script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ initComplete: function () { this.api().columns().every(function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo($(column.footer()).empty()) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('<option value="' + d + '">' + d + '</option>') }); }); } }); }); </script> </head> <body> <table id="myTable" class="display"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <!-- 省略部分内容 --> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </body> </html> ``` 在这个示例中，我们定义了一个 datatable，然后在 `initComplete` 回调函数中使用 `columns().every()` 方法对每一列进行循环。对于每一列，我们创建了一个下拉列表框，其中包含该列的所有唯一值。当用户选择一个值时，我们使用 `column.search()` 方法按该值过滤该列。 注意，我们将 `select` 元素添加到了 `tfoot` 元素中，这是因为我们要让它显示在表格的底部，而不是表头。这个 `tfoot` 元素是必需的，否则我们无法将筛选器添加到列中。 这只是一个简单的示例，您可以根据自己的需求对它进行修改和扩展。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值