表格的后端分页和后端搜索,前端的操作步骤
2019-01-09 11:25
369 查看
本人是一个前端新手,掌握了一些前端的基础之后就开始做老师给的项目了,所以做的磕磕绊绊,碰到啥问题就百度。最近遇到表格的分页与搜索需要后端完成,而我用的是datatable插件,datatable功能的强大心理是有数的所以这其中的解决方法一开始想用datatable自带的后端分页来做,参照的也是很多现有的“怎样实现datatable后端分页”的博客,然后一步步的根据博客内容做,也让后端配合着改了很多次,但是直到最后也没有实现,所以决定换一个方法,实在是不想研究datatable了,虽然它还是很强大,赞美一下。
接下来我简要介绍一下我的解决方法,简单,易实现。
第一步:初始化datatable表格
第二步:选择一个合适的分页插件。大家不妨去找一个分页的插件,这里推荐layui(由于使用非常简单,详细的大家可以看layui的官方分页插件使用文档。)在html里写一个div,给他设置一个唯一标识的id后,html部分就ok了。
第三步:在js里的分页函数中设置分页插件需要的参数,elem指向存放分页的容器,count是数据总数,curr是页数,limit是每页的数据量。
第四步:pageconf里的pagesize是页面需要展示的数据量,currentPage初始化为1。
第五步:表格填充数据的具体方法函数
第六步:最后写填充数据的函数,传给后端当前页数和页面的数据量,成功连接后在success里调用具体填充表格的函数和更新新数据结构pageconf的页数和当前页面的数量的函数。
相关文章推荐
- 利用vue + element实现表格分页和前端搜索的方法
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
- 纯自创新浪博客前端项目js和html自己写时操作步骤详细,用到的图片已上传,已90%但非完整项目
- 从数据库取出数据在jsp页面上以表格形式呈现,并对表格数据进行分页打印操作。
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 前端插件-LayUI-----表格的使用(增删查改、搜索、刷新)
- jquery 表格分页等操作实现代码(pagedown,pageup)
- easyui 插件datagrid扩展应用:动态拼接二维列,表格底部合计行,前端分页,前端生成报表,使用小结:
- 前端实现一个简单的表格分页
- 关键词搜索/分页功能的前端代码(ajax + jQuery)
- bootstrap datatable显示数据表格及因分页获取数据造成的搜索问题
- Element UI表格和分页以及搜索条件的合成组件(1)
- 【jQuery】兼容IE6的表格前端搜索
- Element UI表格和分页以及搜索条件的合成组件(2)
- ExtJs 备忘录(6)—— GirdPanl表格(二) [ 搜索分页 ]
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- DOM高级应用——表格元素的添加、删除、搜索操作1
- Laravel 5.4---后端数据分页和前端显示分页结果