在对datatables做后端数据填充的时候,遇到一个,翻页问题。在多次操作翻页后,总是提示加载中。反了很多博客没有找到原因。

经过测试,发现原来自己坑了自己。

代码如下:

datatables : {

            init : function (table_id,ajax_url,columns,buttons,searchParams) {

                if(null == columns || undefined == columns){
columns = [];
} if(null == buttons || undefined == buttons){
buttons = [];
} var $t_table = $("#" + table_id);
var $api_table = $t_table.dataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
ajax : {
url:ajax_url,
data:function (d) {
if(undefined != searchParams && null != searchParams )
$.each(searchParams,function (i,val) {
d[i] = val;
}); }
},
processing: true,
serverSide: true,
dom: "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
columns : columns,
buttons: buttons }).api();
return $api_table; }
}
 var columns = [
{data:'itemName'},
{data:'itemIcon',
render:function (data, type, row, meta) { return '<img src="'+row.itemIcon+'" width="25" height="25"/>';
}
},
{data:'id'},
{data:'extNeedAmount'},
{
data:'id',
render:function (data, type, row, meta) {
return '<a class="btn-edit">操作</a>';
}
}
]; var buttons = [
{
text: '添加',
className: 'btn green ',
action: function ( e, dt, node, config ) {
$("#addLevelModel").modal("show");
}
}
]; var table = Q.datatables.init('level_table','/admin/basic/level/loaddata',columns,buttons);

后端代码

    /**
* 加载表格内容
* @return type
*/
public function loadDataAction()
{ $column_name = $this->request->get('columns')[$this->request->get('order')[0]['column']]['data'];
$column_order = $this->request->get('order')[0]['dir'];
$search_value = $this->request->get('search')['value']; $params = array(
'order'=>$column_name.' '.$column_order,
'conditions'=>'itemType = '.$this->mItemType.' and ( itemName LIKE "%'.$search_value.'%" )'
);
$recordsTotal = SysItem::count(array( 'conditions'=>'itemType = '.$this->mItemType));
$recordsFiltered = SysItem::count($params); $params['limit'] = array('number' => intval($this->request->get('length')), 'offset' => intval($this->request->get('start')));
$data = SysItem::find($params)->toArray();
$result = array(
'draw'=>intval($this->request->get('draw')),
'recordsTotal'=>$recordsTotal,
'recordsFiltered'=>$recordsFiltered,
'data'=>$data
);
return $this->response->setJsonContent($result);
}

特别注意的地方:

'draw'=>intval($this->request->get('draw'))
draw要原样返回,不然会出现一直加载中,本来我用start做返回的,就 只能前翻,后翻页就出现问题。
前端只要不需要做翻页函数处理,回调部分,我也默认了。datatables非常强大,各种排序过滤功能,这里我没有做代码展示。后面的学习中,再继续追加到这里。

datatables ajax后端请求那些坑的更多相关文章

  1. 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

    项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...

  2. 【坑】前端使用ajax异步请求以后,springMvc拦截器跳转页面无效

    文章目录 前言 `$.ajaxSetup( )` 后记 前言 本文着重解决前后端分离开发的页面调整问题. 笔者,在做一个需求,需要对访问网站,但是没有登录的用户进行拦截,将他们重定向到首页. 很简单的 ...

  3. 实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能

    本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能需求描述:1. 请求后端Api接口地址2. 根据返回信息进行判断处理前端 ...

  4. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  5. ajax同步与异步的坑

      之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...

  6. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  7. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  8. 解决ant Design dva ajax跨越请求 (status=0)

    今天实现了antd作为前端展现,python flask作为后端的数据填充,完全两个独立的服务:过程中遇到ajax跨越请求问题,导致status一直等于0,原来是这么写的: xmlhttp.open( ...

  9. 使用pace监控ajax踩过的坑

    使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...

随机推荐

  1. python【1】-基础知识

    1.简介 python是一种解释性的.面向对象的.带有动态语义的高级程序设计语言. 廖雪峰网站:http://www.liaoxuefeng.com/wiki/001374738125095c955c ...

  2. 对象列表转换为DataTable或DataTable转换为对象列表.

    /**********************************************************************************/ // 说明: 数据转换工具. ...

  3. [移动端]rem适配

    原理:给html根节点设置一个基础font-size值,然后页面的所有元素布局均相对于该font-size值采用rem单位设定.font-size的取值通过js计算. 但字体不用rem单位,原因如下: ...

  4. 解决问题E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录,

    在用sudo apt-get install kmymoney2安装软件kmymoney2时,由于速度太慢,想换个软件源,直接关闭了终端,apt-get但进程没有结束,结果终端提示:“E: 无法获得锁 ...

  5. [SHTSC 2007] 善意的投票

    我就是来复习Dinic算法的,仅10天不写,我已经退化成写一遍+调试需要接近一个小时了,当然其中不乏在网上乱逛的时间… 赞成从S源点连一条单向边,反对向T汇点连一条单向边,朋友关系连双向边. 但是总感 ...

  6. python登录执行命令

    #-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threading import getpass def ssh2(ip ...

  7. Win环境下的文件读写

    在win环境下,有许多方法可以对文件进行读写操作,如MFC 中的CFile类,及一些开源的项目如QT中的QFile.开源的好得是可以多平台,而MFC只是微软自家的东西,对于想写跨平台的人,最好不用MF ...

  8. ORA-06552: PL/SQL: Compilation unit analysis terminated ORA-06553: PLS-553: character set name is not recognized

    首先,确认字符集是否修改的不彻底.SELECT DISTINCT (NLS_CHARSET_NAME(CHARSETID)) CHARACTERSET,DECODE(TYPE#, 1, DECODE( ...

  9. TPS40305 ——开关电源芯片20160901

    TPS4030X芯片共有3款,区别在于开关频率不同. 学习笔记: 1.当开关频率越高,所使用的电感的容量越小,电路越稳定. 2.对于mos管源极的地,尽量和mos管漏极的电源输入的地接近,并且与最终的 ...

  10. Android APP使用NDK编译后的ffmpeg库出现undefined reference to 'posix_memalign'错误

    在android程序中使用NDK编译后的ffmpeg库的时候出现了如下错误: jni/libs/libavutil.a(mem.o): in function av_malloc:libavutil/ ...