1. function getResults(){
  2. var callResults = $.ajax({
  3. url: "。。。。", //接口url
  4. type: "GET", //请求方式
  5. dataType: "json",
  6. headers: {
  7. Accept: "application/json;odata=verbose"
  8. },
  9. success: function (resp) { //请求成功后要做的事情
  10. $('#loadicon').hide(); //这里是隐藏loading图
  11. $('#main').show(); //显示表格
  12. }
  13. });
  14.  
  15. callResults.done(function (data, textStatus, jqXHR){
  16. $('#example').DataTable( {
  17. "bDestroy": true,
  18. "bProcessing": true,
  19. "aaData": data.list, //后台传过来的数据里面的要显示的数据的名称(数组名称)
  20. "aoColumns": [ //要显示数据的每一列
  21. { "mData": "project_name" },
  22. { "mData": "process_status" },
  23. { "mData": "create_time" },
  24. { "mData": "need_feedback_time" },
  25. { "mData": "real_feedback_time"}
  26. ],
  27. "language": { //原先显示都是英文,改成中文
  28. "lengthMenu": "每页显示 _MENU_ 条",
  29. "paginate": {
  30. "first": "第一页",
  31. "last": "最后一页",
  32. "next": "下一页",
  33. "previous": "上一页"
  34. },
  35. "emptyTable": "没有数据",
  36. "info": "显示 _START_ 到 _END_ 共 _TOTAL_ 条数据",
  37. "infoEmpty": "显示 0 到 0 共 0 条数据",
  38. "infoPostFix": "",
  39. "thousands": ",",
  40. "loadingRecords": "没有数据",
  41. "processing": "处理中...",
  42. "search": "查找:",
  43. "zeroRecords": "没有匹配的数据",
  44. "infoFiltered": "(过滤总件数 _MAX_ 条)"
  45. },
  46. "ordering": true, //有排序功能
  47. "order": [[ 2, "desc" ]], //刚开始的时候按第三列降序排列
  48. "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], //一页显示多少条记录
  49. "fnRowCallback": function( nRow, aData, iDisplayIndex ) {//实现行点击,并且能跳转
  50. $(nRow).on( 'click', function () {
  51. // logger.e(JSON.stringify(aData));
  52. // logger.e(JSON.stringify(nRow));
  53. // logger.e(iDisplayIndex);
  54. $(this).toggleClass('selected');
  55. let processId=aData.process_id;
  56. window.location.href = "result.html?process=" + processId;
  57. });
  58. }
  59. } );
  60. });
  61.  
  62. callResults.fail(function (jqXHR, textStatus, errorThrown){
  63. alertDD("表格发生错误: " + jqXHR.responseText);
  64. });
  65. }

使用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. HDFS DATANODE 磁盘容量的最小值

    HDFS的DATANODE的剩余空间具体要到多大?关于这个问题,下面记录下对这个问题的调查 昨天,讨论群里面给出了一个异常: op@odbtest bin]$ hadoop fs -put ../tm ...

  2. docker - 修改镜像/容器文件或者 "Docker root dir" 的在宿主机上的存储位置

    背景 之前在使用docker的时候,由于启动container的时候用的是默认的mount(路径为 /var/lib/docker),这个目录对应的硬盘空间有限,只有200G左右.现在随着程序运行,有 ...

  3. OkHttp3实现Cookies管理及持久化

    转发自:http://www.codeceo.com/article/okhttp3-cookies-manage.html OKHttp3正式版刚发布了没几天,正好重构之前的代码,于是第一时间入坑了 ...

  4. Java的try-catch-finally

    Javac语法糖之TryCatchFinally 如下引用文章:https://help.semmle.com/wiki/display/JAVA/Finally+block+may+not+comp ...

  5. sparkthriftserver启动及调优

    Sparkthriftserver启用及优化 1.  概述 sparkthriftserver用于提供远程odbc调用,在远端执行hive sql查询.默认监听10000端口,Hiveserver2默 ...

  6. MyEclipse2014破解方法

    之前一直使用的MyEclipse2014过期了,无奈之下只能在网上搜怎么破解,结果很管用,在这里记录并和大家分享 https://jingyan.baidu.com/article/fdbd42771 ...

  7. 记laravel5.5项目php-fpm迁移到swoole4.2.9

    事起说明 最近对上线半年多的laravel项目做了一次少大的改动,由php-fpm改为swoole,这里做个记录. 2019年过年前半个月,上阿里云后台查看前一天的访问请求日志,发现很多接口响应慢.翻 ...

  8. python分布式爬虫打造搜索引擎--------scrapy实现

    最近在网上学习一门关于scrapy爬虫的课程,觉得还不错,以下是目录还在更新中,我觉得有必要好好的做下笔记,研究研究. 第1章 课程介绍 1-1 python分布式爬虫打造搜索引擎简介 07:23 第 ...

  9. UA 用户代理

    User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等.被广泛用来标识 ...

  10. [javaSE] 集合框架(共性方法)

    Collection接口的常用方法 add(),添加一个元素 addAll(),添加一组元素 clear(),清空 remove(),移除一个 removeAll(),移除一组 size(),元素个数 ...