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

jQuery Datatable,保存表的状态,如分页,搜索等

好的,我会尽力为您提供最完善且全面的答案。

jQuery Datatable是一个基于jQuery的表格插件,可以轻松地创建和自定义表格,包括表格分页、搜索、排序、表格样式等功能。在保存表格状态方面,jQuery Datatable提供了多种方法,例如通过将表格状态保存到Cookie中或通过使用localStorage来实现。

具体来说,您可以使用jQuery Datatable的stateSave方法将表格状态保存到Cookie中,例如:

代码语言:javascript
复制
$('#example').DataTable({
  stateSave: true,
  stateDuration: 60 * 60 * 24 * 7, // 24小时
  initComplete: function () {
    this.api().state.save('search', {
      duration: 60 * 60 * 24 * 7, // 24小时
      queue: false
    });
  }
});

这将把表格状态保存到Cookie中,并在下次加载表格时自动恢复状态。

如果您想要在关闭浏览器窗口后仍然能够保存表格状态,您可以使用localStorage来实现:

代码语言:javascript
复制
$('#example').DataTable({
  stateSave: true,
  stateDuration: 60 * 60 * 24 * 7, // 24小时
  initComplete: function () {
    this.api().state.save('search', {
      duration: 60 * 60 * 24 * 7, // 24小时
      queue: false
    });
  }
});

// 在关闭浏览器窗口后,仍然可以保存表格状态
localStorage.setItem('datatables-state', JSON.stringify($('#example').DataTable().state()));

这将把表格状态保存到localStorage中,并在下次加载表格时自动恢复状态。

总的来说,jQuery Datatable是一个非常强大的表格插件,提供了丰富的功能和灵活的配置选项,可以轻松地创建和管理表格,同时还可以保存表格状态,以方便数据的复用和迁移。

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

相关·内容

datatables应用程序接口API

page()API 获得或者设置表格当前页 page.info()API 获得表格分页信息 page.len()API 获得或者设置表格分页长度 search()API 搜索表格里数据 settings...()API 获得表格settings对象 state()API 得到表格最新存储状态 state.clear()API 清除表格储存状态 state.loaded()API 获取初始化期间加载状态...state.save()API 触发状态保存操作 单元格(Cells) 名称 说明 cell().cache()API 获取被选择单元格缓存数据 cell().data()API 获取/设置被选择单元格数据...获得选中单元格dom cell().render()DT 获得渲染过单元格数据 cell()DT 获取中一个单元格 cells().cache()DT 从缓存里获取选中多个单元格数据 cells...转为jQuery实例 unique()DT 去重 unshift()DT 在结果集里从头添加一个或多个项目,返回长度 静态方法(Static) 名称 说明 $.fn.dataTable.isDataTable

4.4K30

datatables使用教程

分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...",//除首页、上一页、下一页、末页四个按钮还有页数按钮 searching: false,//是否开始本地搜索 stateSave: false,//刷新时是否保存状态 autoWidth...",//除首页、上一·页、下一页、末页四个按钮还有页数按钮 searching: false,//是否开始本地搜索 stateSave: false,//刷新时是否保存状态 autoWidth...具体查看代码仓库:datatables使用教程分支 ajax异步带参数获取数据源 效果截图 ? 分页和数据展示都做好了,那么现在就来做一个搜索条件吧,项目来讲,搜索这个功能是必不可少。...",//除首页、上一·页、下一页、末页四个按钮还有页数按钮 searching: false,//是否开始本地搜索 stateSave: false,//刷新时是否保存状态 autoWidth

7K20

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

2017-01-12 03:19:31 本文将介绍jquery DataTable一些基础配置,分页、排序、过滤,代码如下 $(document).ready(function() { $('...#example').dataTable({ "bPaginate": true, //分页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter...当开启分页功能后,jquery DataTable将会在页面上将表格进行分页处理,此分页方式与后台无关,只需要在初始化之前将数据填充到表格当中,然后进行表格初始化操作,之后插件会自动对表格进行分页处理...1.3过滤功能 过滤功能也可以叫做为搜索查询功能,该功能在大数据量表格中作用尤为突出,当数据量很大时,用户不想通过翻页方式来逐条搜索,通过后台搜索查询方式又很慢,这时就显示出了该功能优越性。...它可以在当用户输入每个字符时进行表格全文字段搜索搜索出相关信息展示出来,同时进行分页处理。

1.2K10

jquery datatable 参数

or false, default true 开关,是否显示表格一些信息 bJQueryUI true or false, default false 是否使用jquery ui themeroller...这个数据是记录在cookies中,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前状态都是保存下来 sScrollX 'disabled' or  '100%' 类似的字符串 是否开启水平滚动...配合使用 iDisplayLength 整数,默认为10 用于指定一屏显示条数,需开启分页器 iDisplayStart 整数,默认为0 用于指定从哪一条数据开始显示到表格中去 iScrollLoadGap...} 又是初始时指定搜索参数相关,有点复杂,没搞懂目前 sAjaxDataProp 字符串,default 'aaData' 指定当从服务端获取表格数据时,数据项使用名字 sAjaxSource URL...' 用于指定分页器风格 sScrollXInner string default 'disabled' 又是水平滚动相关,没搞懂啥意思 DataTable支持如下回调函数 回调函数名称 参数 返回值

17810

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

使用场景:不使用Django模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...开启此模式后,你对datatables每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应值。...) ) 注意,我这里datatable分页使用是post请求, 因为分页时候需要向服务端传递很多参数,使用get请求的话,这里就很难受了。...这个方法是将你数据跟据你页码,页面大小,分好页 def page(deploy_list ,limit,offset):#查询分页,调用此方法需要传获取数据列表,页面大小,页码 # 取出该所有数据...以上这篇DjangoWeb使用Datatable进行后端分页实现就是小编分享给大家全部内容了,希望能给大家一个参考。

4.9K20

【初学者指南】在ASP.NET MVC 5中创建GridView

服务器端和客户端有许多可用第三方库,这些库能够提供所有必需功能, Web 表格中搜索、排序和分页。是否包含这些功能,取决于应用特殊需求,例如在客户端和服务器端提供搜索或其它功能需求。...DataTables 使用 jQuery 数据 以上库和插件都有自己优缺点,其中 jQuery 数据是个不错选择。...它具有高度灵活性,支持分页,即时搜索,多列排序;它也支持几乎所有可以被绑定数据源。...例如: DOM JavaScript Ajax Server-side processing 我最喜欢选项之一是, jQuery 数据不但支持客户端搜索分页、排序,而且还提供了一个可以在服务器端处理选项...下面,我们先来看看一个利用客户端处理例子。我们将会实现一个具有搜索、排序和分页功能工作,正如下图中我们看到: ?

6.1K90

jquery.datatables 分页功能

Datatables 插件基本用法就不再介绍了,这里主要分享一下使用它实现服务器端获取数据时分页处理。...在后端不管是使用什么技术,按下面API中参数封装对象即可,分页,排序,搜索都不需要手动去维护这些信息,方便、方便、太方便!...因此,您可以轻松地显示由数百万行组成。 当使用服务器端处理时,DataTables将在页面上每个绘图(即分页,排序,搜索)时向服务器发出一个Ajax请求。...您还将使用该ajax选项来指定DataTable应从其获取Ajax数据URL。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以在jQuery请求中使用选项,你也可以使用DataTables!

4.8K20

mybatis(pagehelper) dataTables实现分页功能

要求在服务器接收到此参数后再返回 */ private int draw; // 第几次请求 /* * 第一条数据起始位置,比如0代第一条数据 */ private int...* 这个也可能是-1,代表需要返回全部数据(尽管这个和服务器处理理念有点违背) */ private int length = 100; // 数据长度 /* * 全局搜索条件,条件会应用到每一列...*/ private String columns_search_value; /* * 特定列搜索条件是否视为正则表达式, 如果为 true代表搜索值是作为正则表达式处理,为...过滤后记录数(如果有接收到前台过滤条件,则返回是过滤后记录数) */ private int recordsFiltered; /* * 必要。中中需要显示数据。...stateSave: false,//刷新时是否保存状态 autoWidth: true,//自动计算宽度 //deferRender

2.5K30

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

一般情况下,在进入这个编辑页面之前,还应该有另外一个页面,可以一次展示多条数据记录信息。在这个数据列表界面中,可以进行各种操作,删除、跳转、编辑。...这个数据列表页面不仅可以按照数据库分类展示数据,也可以根据需要进行展示,如按指定字段排序、根据查询结果展示、分页展示。 用什么来展示数据列表?...实现中,不仅要控制输出数据列表HTML代码,同时还必须要考虑其他因素,分页、参数传递、查询、页面回调。从某种意义上来说,这种做法算是一种“重新制造轮子”行为。...在实际应用中,配合JQuery、CSS样式和Ajax,可以发挥强大威力,达到“无所不能”境界。 表格还是列表? 输出数据库中数据列表,实际上就是以格式化方法,把一个多行多列数据展示出来。...本着最简单原则,表头可以从DataTable中获取,dt.Columns[i].ColumnName就可以返回dt第i列名。

2.5K50

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

大家好,又见面了,我是全栈君 UI标签库专题一:JEECG智能开发平台 BaseTag(样式和JS引入标签) 1.BaseTag(样式和JS引入标签) 1.1....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函数禁用右键菜单,禁用回退。...是 null pagination boolean 是否显示分页条 否 true title string 表格标题 否 null idField string 标识字段。...boolean 是否显示分页文本内容 否 true style string 插件类型有easyui和datatable2种 否 easyui pageSize num 每页显示记录数 否 10

4.4K20

基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页搜索(二)

,这篇博客我们需要将数据库中记录显示到界面上,并实现数据分页显示。...曾经我写过分页博客,分页很简单, 本质区别在于分页时从数据库读取信息方式:假分页:一次性读取数据;真分页:多次读取数据。...说实话,加载数据并实现分页搜索功能相对而言是很简单,无非就是调用一般处理程序,只要你会一般处理程序就没有任何问题。...转换成Json格式 } 这篇博客主要给大家介绍datagrid如何实现分页搜索功能。...: 使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI简介 Asp.net之真假分页大揭秘、使用AspNetPager实现真分页 Asp.net前端页面开发总结 Asp.net 一般处理程序

1.1K30

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

通过前文,我们已经了解到使用 jQuery 插件数据可以很容易地实现具有搜索、排序和分页等重要功能表格。 ?...前文中需要注意是,所有通过插件实现特性都是客户端,这意味着所有的数据都首先在页面载入,然后由插件来处理客户端搜索分页和排序数据。...介绍 在本文中,我们将会学习如何实现服务器端分页搜索和排序功能。从长远来讲,这是一种更好方式来应对数据集特别大情况。 我们将会修改前文中源代码,现在就开始吧!...安装包管理器默认是打开,它会在你解决方案中显示成已安装 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...如果不想在数据加载时,显示这样消息,可以将它默认状态设为 false,接下来,我们定义数据回调行为,在我们通过行属性指定了需要展示行之后,lengthMenu 则会用于显示每页数据数目。

5.4K80

JQuery 表格插件介绍:Flexigrid 和 DataTables

JQuery 表格插件有很多。Flexigrid 和 DataTables 是我最近使用,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格插件,可以考虑它们。...Flexigrid 官方 Flexigrid 特性展示: 列宽度可拖拽调整 高度和宽度可拖拽调整 列头可排序 主题支持 支持 XML/JSON 格式 Ajax 数据源 支持分页 可以显示/隐藏列 表格搜索功能...比较遗憾地方在于,它只提供了这种基于 row (即表头在第一行),而不支持基于 column 列表(即表头在第一列)列定义和数据集合表示。...另外,本身也包含了太多东西,不仅仅是数据内容,还有很多控制分页、展示等等可选字段。...DataTables DataTables 相较而言,功能上要多得多了,官方特性展示: 可定制分页 即时数据过滤 多列排序 列宽自动调整 支持各种数据源 国际化支持 插件支持 表格当前状态保持 ……

2.4K20
领券