首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在外部行筛选器之后重置Jquery Datatable分页

,可以通过以下步骤实现:

  1. 首先,确保你已经引入了Jquery和Jquery Datatable的相关库文件。
  2. 初始化Datatable时,设置一个全局变量来保存Datatable的实例,例如:var dataTable;
  3. 在初始化Datatable时,使用drawCallback回调函数来监听表格重绘事件,例如:dataTable = $('#example').DataTable({ // Datatable的配置选项 "drawCallback": function(settings) { // 在表格重绘后执行以下操作 // 重置分页 this.api().page('first').draw(false); } });
  4. 在外部行筛选器的事件处理函数中,调用Datatable实例的draw()方法来重新绘制表格,例如:$('#filterButton').on('click', function() { // 处理外部行筛选器的逻辑 // ... // 重新绘制表格 dataTable.draw(); });

这样,当外部行筛选器发生变化时,会重新绘制Datatable,并将分页重置到第一页。

Jquery Datatable是一个功能强大的表格插件,它可以帮助开发者快速实现表格的展示、排序、分页等功能。它的优势包括易用性、灵活性和扩展性。它适用于各种场景,如数据展示、数据分析、报表生成等。

腾讯云提供了云计算相关的产品和服务,其中与Jquery Datatable相关的产品是腾讯云CDN(内容分发网络)。CDN可以加速静态资源的传输,提高网站的访问速度和用户体验。你可以通过腾讯云CDN产品了解更多信息,并查看产品介绍和文档:腾讯云CDN

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DjangoWeb使用Datatable进行后端分页的实现

使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...……特别是大数据量的时候,开启此功能比较好 "bServerSide": true, //开启服务模式,使用服务端处理配置datatable。...) ) 注意,我这里的datatable分页使用的是post请求, 因为分页的时候需要向服务端传递很多参数,使用get请求的话,这里就很难受了。...null, false); // 刷新表格数据,分页信息不会重置 } runRefresh(); </script 最后强调一点,table数据也是可以通过get请求进行加载的。...但是使用了get方式后,某页进行操作再进行上面的JS刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。

5K20
  • Datatables表格插件,你用过吗?

    分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...下面我们来优化一下这个表格,分页方式有两种: 第一种客户端分页 (好处:服务写代码少,简单,坏处:数据量大,有可能发送失败) <?...= $('#table_id_example').DataTable({ "serverSide": true, //开启服务分页 ajax: {//进行ajax请求...ajax请求中利用data属性动态实时获取用户输入的数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要的字段和值; <form...{targets: [3], orderable: false},//索引第3列禁止排序 ], "serverSide": true, //开启服务分页

    6K30

    datatables使用教程

    分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.<em>jquery</em>.com/<em>jquery</em>-1.10.2...要求<em>在</em>服务<em>器</em>接收到此参数后再返回(具体看 下面) start integerJS 第一条数据的起始位置,比如0代表第一条数据 length integerJS 告诉服务<em>器</em>每页显示的条数,这个数字会等于返回的...服务端步骤: 编写controller接口,接收搜索参数,处理完,返回datatables对象(自己封装的) 编写service业务逻辑,处理数据,返回给controller 编写dao,自定义sql <em>筛选</em>数据..."> <table id

    7.1K20

    datatables应用程序接口API

    API实例可以通过以下方式创建: $( selector ).DataTable(); $( selector ).dataTable().api(); new $.fn.dataTable.Api(...(完成)一个 jQuery 选择操作 ajax.json()API 获得最终的json数据 ajax.params()API 获取最后一次Ajax请求提交的参数 ajaxAPI ajax方法的命名空间...page()API 获得或者设置表格当前页 page.info()API 获得表格的分页信息 page.len()API 获得或者设置表格的分页长度 search()API 搜索表格里的数据 settings...API 对象 tables().body()DT 得到表格 tbody节点,如果是一次性初始化多个表格,使用类选择,或者table标签选择初始化,使用下列方法,table()针对单个table,tables...实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique()DT 去重 unshift()DT 结果集里从头添加一个或多个项目

    4.4K30

    Jquery DataTable 的学习之基础配置(二)

    2017-01-12 03:19:31 本文将介绍jquery DataTable的一些基础配置,如分页、排序、过滤等,代码如下 $(document).ready(function() { $('...#example').dataTable({ "bPaginate": true, //分页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter...当开启分页功能后,jquery DataTable将会在页面上将表格进行分页处理,此分页的方式与后台无关,只需要在初始化之前将数据填充到表格当中,然后进行表格初始化操作,之后插件会自动对表格进行分页处理...1.2改变每页显示数据数量 此功能的前提是需要开启分页功能,它可以控制每页显示的数据量,插件会根据每页显示的数据量自动进行分页处理,同样不需要后台控制,只与前端页面相关。...1.4排序功能 通过设置排序功能后用户可以点击表头时进行排序处理,例如某列为价格信息,那么点击价格列后,插件会自动根据价格进行排序,可进行升序和降序排序。

    1.2K10

    UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    JS插件类型 插件名 描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...Beta2 Jqueryui 引入版本号jquery-ui-1.9.2 prohibit 经常使用浏览操作JS函数如禁用右键菜单,禁用回退。...禁用F5 designer 在线流程设计函数库 tools artDialog4.1.6弹出窗及经常使用CURD操作函数 ckeditor 须要载入t:ckeditor时引入ckeditor所须要的...js ckfinder 须要载入t:ckfinder或t:ckeditor载入ckfinder时引所需的JS 2....boolean 是否显示分页文本内容 否 true style string 插件类型有easyui和datatable2种 否 easyui pageSize num 每页显示的记录数 否 10

    4.5K20

    ASP.NET MVC5中实现具有服务端过滤、排序和分页的GridView

    通过前文,我们已经了解到使用 jQuery 插件的数据表可以很容易地实现具有搜索、排序和分页等重要功能的表格。 ?...介绍 本文中,我们将会学习如何实现服务端的分页,搜索和排序功能。从长远来讲,这是一种更好的方式来应对数据集特别大的情况。 我们将会修改前文中的源代码,现在就开始吧!...如果不想在数据加载时,显示这样的消息,可以将它默认状态设为 false,接下来,我们定义数据表的回调行为,我们通过属性指定了需要展示的之后,lengthMenu 则会用于显示每页数据的数目。...实现控制中的排序、筛选分页 完成安装之后,进入 AssetController,编写 Get 行为的实现代码: public ActionResult Get([ModelBinder(typeof...服务端实现表格的过滤、分页和排序等功能,能够减少客户端数据处理的任务量,方便更好更快的加载并显示数据。

    5.4K80

    【8】数据浏览表格的快速输出

    经过多次碰壁之后,对于数据列表页面的开发,逐步形成一套不依赖各种现成的控件,而以HTML代码为核心的解决方式。经过多次的实际项目的考验,较好地完成了需求。...各种浏览下都能正常工作; 2、可控性强。数据列表页面的所有HTML输出,都是编码实现的。因此,对于任何的需求和修改,都相当容易实现。...实际的应用中,配合JQuery、CSS样式表和Ajax,可以发挥强大的威力,达到“无所不能”的境界。 表格还是列表? 输出数据库中数据列表,实际上就是以格式化的方法,把一个多行多列的数据展示出来。...相比之下,表格就显得更加“皮实”一些: 只要表格的HTML代码出来,即使不要CSS,展示出的效果就大致差不多了; 永远不会错; 各种浏览对于表格的分歧较小,兼容性的压力更小一些 对上例,只要修改一下...4、前端代码需要ID列,但不要显示 可以通过JS代码或者JQuery代码隐藏第一列。 5、新增控制列 可以通过前端代码,对或者表格的单击事件进行处理,提取该行的ID,并转换为相应的控制链接。

    2.5K50

    jquery datatable 参数

    ui themeroller的风格 bLengthChange true or false, default true 开关,是否显示一个每页长度的选择条(需要分页支持) bPaginate true...or false, default true 开关,是否显示(使用)分页 bProcessing true or false, defualt false 开关,以指定当正在处理数据的时候,是否显示...当这个标志为true的时候,分页就默认关闭 bSort true or false, default true 开关,是否让各列具有按列排序功能 bSortClasses true or false,...整数,默认为null 延迟加载,它的参数为要加载条目的数目,通常与bServerSide,sAjaxSource等配合使用 iDisplayLength 整数,默认为10 用于指定一屏显示的条数,需开启分页...布局的一个强大的属性,另开专门文档来补充说明吧 sPaginationType 'full_numbers' or 'two_button', default 'two_button' 用于指定分页风格

    23910

    (数据科学学习手札117)Python+Dash快速web应用开发——交互表格篇(下)

    1 简介    这是我的系列教程Python+Dash快速web应用开发的第十四期,在前两期中,我们针对dash_table的自定义样式、前后端分页、单元格内容编辑等特点展开了介绍。   ...上一期文章最后我们学习了通过设置参数editable=True,使得渲染出的表格可以通过鼠标双击进行编辑,而dash_table除此之外,还有更多实用的交互能力: 2.1.1 按列排序 普通单列排序   DataTable...图2 基于后端排序的多列排序   DataTable()中设置sort_action='native'时,对应的是按列排序的前端模式,也即是数据一次性灌注到浏览的前提下进行排序,这种方式不仅不适合大型数据集...图4   而dash_table中自带的条件筛选语法很丰富,有条件的朋友可以前往https://dash.plotly.com/datatable/filtering了解更多。   ...图6 3 开发一个在线取数工具   在学习完今天的内容之后,我们来结合之前上传下载篇中提到的下载功能,来制作一个简单的对指定数据库中的数据表进行快速条件筛选并下载的工具,其中DataTable的derived_virtual_data

    1.9K20

    用Python轻松开发数据库取数下载工具

    CNFeffery/DataScienceStudyNotes ❞ 1 简介 这是我的系列教程「Python+Dash快速web应用开发」的第十四期,在前两期中,我们针对dash_table的自定义样式、前后端分页...上一期文章最后我们学习了通过设置参数editable=True,使得渲染出的表格可以通过鼠标双击进行编辑,而dash_table除此之外,还有更多实用的交互能力: 2.1.1 按列排序 「普通单列排序」 DataTable...margin-top': '50px' } ) if __name__ == '__main__': app.run_server(debug=True) 图2 「基于后端排序的多列排序」 DataTable...()中设置sort_action='native'时,对应的是「按列排序」的前端模式,也即是数据一次性灌注到浏览的前提下进行排序,这种方式不仅不适合大型数据集,而且只支持「单列排序」。...」中提到的下载功能,来制作一个简单的对指定数据库中的数据表进行快速条件筛选并下载的工具,其中DataTable的derived_virtual_data属性记录了经过排序、条件筛选等操作后当前显示的表格数据

    1.2K20

    jQuery 表格插件汇总

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。...Ingrid, the jQuery Datagrid - HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示)。 ? ? JQTreeTable - 表格中加入树形结构 ? ?...jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件,可以 Ajax 方式从服务端获取数据填充进来(演示)。 ? ?...Table Drag and Drop - 通过拖放,对表格中的数据重新排列,可以设置禁止拖放的。 ? ? Table Pagination - 表格下方自动生成分页导航。 ? ?...表格搜索,筛选 ? tableFilter - 给表格添加简单的筛选功能。 ? ? uiTableFilter - 根据条件筛选(隐藏)表格 ? ?

    7.6K10

    Magicodes.IE 2.2里程碑需求和建议征集

    支持各种筛选,以便支持多语言、动态控制列展示等场景,具体使用见单元测试: 导入列头筛选(可动态指定导入列、导入的值映射关系) 导出列头筛选(可动态控制导出列,支持动态导出(DataTable))...导入结果筛选(可修改标注文件) 导出支持文本自定义过滤或处理; 导入支持中间空行自动跳过; 导入支持自动根据 DTO 生成导入模板,针对必填项将自动标注; ?...目前导出即为数据表 【导出】添加扩展方法ToExcelExportFileInfo 【导出】IExporter再添加两个动态DataTable导出方法,无需定义Dto即可动态导出数据,并且支持表头筛选...param> /// 数据 /// 表头筛选...summary> /// 数据 /// 表头筛选

    1.6K20
    领券