function getResults(){
var callResults = $.ajax({
url: "。。。。", //接口url
type: "GET", //请求方式
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
},
success: function (resp) { //请求成功后要做的事情
$('#loadicon').hide(); //这里是隐藏loading图
$('#main').show(); //显示表格
}
}); callResults.done(function (data, textStatus, jqXHR){
$('#example').DataTable( {
"bDestroy": true,
"bProcessing": true,
"aaData": data.list, //后台传过来的数据里面的要显示的数据的名称(数组名称)
"aoColumns": [ //要显示数据的每一列
{ "mData": "project_name" },
{ "mData": "process_status" },
{ "mData": "create_time" },
{ "mData": "need_feedback_time" },
{ "mData": "real_feedback_time"}
],
"language": { //原先显示都是英文,改成中文
"lengthMenu": "每页显示 _MENU_ 条",
"paginate": {
"first": "第一页",
"last": "最后一页",
"next": "下一页",
"previous": "上一页"
},
"emptyTable": "没有数据",
"info": "显示 _START_ 到 _END_ 共 _TOTAL_ 条数据",
"infoEmpty": "显示 0 到 0 共 0 条数据",
"infoPostFix": "",
"thousands": ",",
"loadingRecords": "没有数据",
"processing": "处理中...",
"search": "查找:",
"zeroRecords": "没有匹配的数据",
"infoFiltered": "(过滤总件数 _MAX_ 条)"
},
"ordering": true, //有排序功能
"order": [[ 2, "desc" ]], //刚开始的时候按第三列降序排列
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], //一页显示多少条记录
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {//实现行点击,并且能跳转
$(nRow).on( 'click', function () {
// logger.e(JSON.stringify(aData));
// logger.e(JSON.stringify(nRow));
// logger.e(iDisplayIndex);
$(this).toggleClass('selected');
let processId=aData.process_id;
window.location.href = "result.html?process=" + processId;
});
}
} );
}); callResults.fail(function (jqXHR, textStatus, errorThrown){
alertDD("表格发生错误: " + jqXHR.responseText);
});
}

使用DataTables插件与后台对接表格的更多相关文章

  1. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. dataTables 插件学习整理

    在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...

  4. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  5. Django使用DataTables插件总结

    Django使用Datatables插件总结 文章中的例子已上传至github 基本使用 Datatables插件是一款方便简单的展示数据的列表插件.关于基本使用,官方网站上的已介绍的很详细,这里我再 ...

  6. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  7. jQuery的dataTables插件实现中文排序

    最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下, ...

  8. magento安装新插件后后台配置空白解决办法

    前段时间,安装完Magento插件以后,就会出现空白或者404问题,在某些运营中的magento网站,安装新插件后后台配置空白解决. 1 将sysytem->toos->Compilati ...

  9. 前端Datatables自定义事件(监听Datatables插件一些常见的事件动作)

    今天开发项目的时候,用Datatables插件做前端分页列表,想在列表发生翻页.排序.搜索.改变单页显示数据条数这些行为的时候做一些其他的操作,看了半天Datatables官网终于找到可以监测到这些事 ...

随机推荐

  1. (转)Python rsplit() 方法

    原文:https://www.cnblogs.com/wushuaishuai/p/7792874.html 目录 描述 语法 参数 返回值 实例 正文 回到顶部 描述 Python rsplit() ...

  2. 用PopupWindow做下拉框

    最近在做下拉框,本来想用spinner,可是spinner达不到项目要求,跟同学同事问了一圈,都在用popwindow, 网上看了一下,popwindow挺简单的,可定制性挺强的,符合我的要求,所以, ...

  3. Android 使用zxing生成二维码的方法

    public void createQRImage(String url) { try { // 判断URL合法性 if (url == null || "".equals(url ...

  4. JavaScript -- 猜数、遍历

    ----- 004-猜数.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...

  5. ls命令显示的total你知道代表着什么吗?

    今天我无意间在用ls命令的时候发现显示的内容里的total,这个total代表着什么,引起了我的疑惑. 接下来开始解开它的神秘面纱. total后面的数字是指当前目录下所有文件所占用的空间总和,它是怎 ...

  6. SpringBoot入门 (三) 日志配置

    上一篇博文记录了再springboot项目中读取属性文件中配置的属性,本文学习在springboot项目中记录日志. 日志记录在项目中是很常见的一个功能了,对排查问题有很大帮助,也可以做分类分析及统计 ...

  7. 异常空格,ASCII (194,160)问题

    今天运营的同学反映有一些店铺的名称后面带空格,我下意识的说不可能啊,我已经处理过了啊.然后就找出来看. 其中有个店铺的名称是“安踏 ”,第一眼看上去好像是带了个空格.然后我就仔细的看了下. pry(m ...

  8. Visual Studio最常用的快捷键

    Ctrl + J:快捷提示,强迫智能感知: Ctrl + 空格键:使用 IntelliSense(智能感知)自动完成: Ctrl + Z:撤销,回退键: Ctrl + Shift + 空格:强迫显示参 ...

  9. 把AspDotNetCoreMvc程序运行在Docker上-part3:使用独立的存储容器

    接上一篇博文<把AspDotNetCoreMvc程序运行在Docker上-part2:修改容器以及发布镜像>,这次我们看看如何使用docker存储数据. 背景 之前的示例都只有一个网站应用 ...

  10. JavaScript unshift()函数移入数据到数组第一位

    你不仅可以 shift(移出)数组中的第一个元素,你也可以 unshift(移入)一个元素到数组的头部. .unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素, ...