最近做东西有一个需求,因为数据量很大,在这里我决定使用数据表的服务端分页,同时还需要传递查询条件到服务端。在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为:
服务端:php(使用thinkphp)
页面样式来自于辉辉框架(数据表版本为1.10.0)
主要修改(数据库)配置项为:
1)流程:流程使用创建交互式、快速动态网页应用的网页开发技术源
2)服务器端:路径使用服务端分页
3)createdrowl :函数(){ }回调函数,用于添加事件或类名
4)a柱用于处理、显示数据,其中提出属性用于自定义列
1 .数据表的射流研究…代码为:
$('.表排序').dataTable({ processing: true,serverSide: true,Ajax : { ' URL ' : ' { : U '(' Msg/index ')} ',' data':function(d){ //额外传递的参数d.mintime=$('#logmin ').val();d.maxtime=$('#logmax ').val();} },bStateSave: true,//状态保存aLengthMenu : [20,30,50,100,150],bProcessing : true,bAutoWidth: false,bFilter : true,//是否启动过滤、搜索功能bInfo : true,//是否显示页脚信息,数据表插件左下角显示记录数createdrowl :函数(行、数据、索引){ $(行)。addCLaSS(' text-c ');$('#count ').html(数据。过滤的记录);},AoColumns 3360[{ ' SClass ' : '文本中心',' data': 'id ',' render':函数(数据,类型,完整,元){ return ' input type=' checkbox ' name=' select ' value=' data ' '/';}、“可记录”:假}、{“mData”:“id”}、{“mData”:“来自昵称”}、{“mData”:“内容”}、{“mData”:“msg type”}、{“mData”:“时间”}、{“sClass”:“文本中心”、“数据”:“id”、“”查看href=' JavaScript : rel=' external nofollow ' rel=' external nofollow ' onclick=' show('查看`,`_ _ _ URL _ _/show/id/' data ' `,`,` 610 `)class=' ml-5 ' style=' text-decision : none 'iclass='hui-iconfont'查看/I/a ';html=' a style=' text-decoration : none ' class=' ml-5 ' OnClick=' SignDel(this,' data ')' href=' JavaScript :rel='外部nofollow' rel='外部nofollow' title='删除一、class='Hui-iconfont'/i删除/a ';返回html},' Oreecyable ' : false }]});2.服务端方面:
控制器:接收参数如下:draw前端传过来的值,原值返回,用于验证mintime、maxtime自定义参数(时间)search.value数据表搜索框参数,用于查询筛选订单。0 .列要排序的单元格(从0开始,字段需要自己设置)order.0.dir排序(升序、降序)开始起始条数(第几条开始)长度查询长度返回的数据如下:draw返回前端传过来的值记录总数记录总条数记录已过滤条件筛选后的记录总条数数据服务端查询的数据返回数据形式:json3 .服务端后端完整代码如下:
1)控制器代码:
公共函数索引(){ if(IS _ AJAX){ $ list=D(' Msg ')-GetDATa(I(' get ')));$ this-AJaxreturn($ list);} $ this-display();}2)型号层代码:(*其中交易时间方法主要用于处理时间段)
公共函数getData($data){ //获取数据表发送的参数必要$ draw=$ data[' draw '];//这个值直接返回给前台//获取时间区间$ timeArr[' min time ']=$ data[' min time '];$ timeArr['最大时间']=$ data['最大时间'];$其中=$本次交易时间($ TiMer);//搜索框$ search=trim($ data[' search '][' value ']);//获取前台传过来的过滤条件if(strlen($ search)0){ $其中[' id |来自昵称|内容|消息类型']=数组(' like ',' % ').$搜索。'%');} //定义查询数据总记录数SQL $ recordsTotal=$ this-count();//定义过滤条件查询过滤后的记录数SQL $ records filter red=$ this-where($ where)-count();//排序条件$orderArr=[1='id ',2='fromnickname ',3='content ',4='msgtype ',5=' time '];//获取要排序的字段$orderField=(空($ order arr[$ data[' order '][' 0 '][' column '])?id ' : $ order arr[$ data[' order '][' 0 '][' column ']];//需要空格,防止字符串连接在一块$order=$orderField .$ data[' order '][' 0 '][' dir '];//按条件过滤找出记录$ result=[];//备注:美元数据['开始']起始条数$data['length']查询长度$result=$this-field('id,fromnickname,content,msgtype,time ')-where($ where)-order($ order)-limit(int val($ data[' start ']),int val($ data[' length ']))-select();//处理数据if(!empty($ result)){ foreach($ result as $ key=$ value){ $ result[$ key][' time ']=date(' Y-m-d h : I :s ',$ value[' time ');$ result[$ key][' records filter red ']=$ records filter red;} } //拼接要返回的数据$list=数组(' draw'=intval($draw)、' recordsTotal '=int val($ recordsTotal)、' records filtered '=int val($ records filterred)、' data'=$result,返回$ list}3)实现自定义创建交互式、快速动态网页应用的网页开发技术搜索
1.在WdatePicker中添加onpicked回调函数2.执行table.fnFilter(),其中桌子为数据表对象以WdatePicker插件为例(输入框类似,绑定待清扫房事件即可):
输入类型=' text ' on focus=' WdatePicker({ max date : ' # F){ $ DP .$D('logmax')||'%y-%M-%d'} ',onpicked : function(){ table。fn filter();}})名称=' min time ' id=' log min ' class=' input-text Wdate ' style=' width :120 px;'3.数据表中创建交互式、快速动态网页应用的网页开发技术属性中数据属性定义额外要传递的参数
例子:
Ajax : { ' URL ' : ' { : U(' Msg/index ')} ',' data':function(d){ //额外传递的参数d.mintime=$('#logmin ').val();d.maxtime=$('#logmax ').val();}4) 代码截图:
a.超文本标记语言页面
b.js部分
以上这篇ThinkPHP整合数据表实现服务端分页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。