在开发web项目中,界面就是一个以丰富友好的样式来展现数据的窗口,同样的数据不用的展现形式给人不同的体验,数据列表是数据是一种常见展现形式,对于数据列表的一个最基本的要求就是能够实现分页以及检索功能。

datatables是一个不错的基于jQuery的前端框架,它除了满足我们基本的分页和检索要求还有其他高级的功能。如果对datatables的高级功能感兴趣可以查看官网的API了解具体如何使用。

下面是一些datatables的常用的初始化配置。

页面HTML代码如下

  1. <table width="100%" class="display" id="dataGrid" cellspacing="0">
  2. <thead>
  3. <tr>
  4. <th>主键</th><th>序号</th><th>接口名称</th><th>问题类型</th><th>问题内容</th><th>咨询时间</th><th>联系人</th><th>处理状态</th><th>完成日期</th><th>问题细节</th><th>批次号</th><th>操作</th>
  5. </tr>
  6. </thead>
  7. </table>

在正式使用datatables的脚本之前我们需要做一些准备工作引入脚本文件等参考如下下面的文件中并没有提到jquery和datatables脚本文件。这个两个脚本文件 handlerbars是一个js模板引擎框架,fnReloadAjax是datatables的一个plugin插件。我们使用到了这两个js脚本。

  1. <script src="${ctp}/js/handlebars-v4.0.5.js"></script>
  2. <script src="${ctp}/js/fnReloadAjax.js"></script>
  3. <script id="tpl" type="text/x-handlebars-template">
  4. {{#each func}}
  5. <button type="button" class="btn{{this.type}}" onclick="{{this.fn}}">{{this.name}}</button>
  6. {{/each}}
  7. </script>

下面是datatables核心的js脚本内容

  1. function initDataGrid(){
  2. var tpl = $("#tpl").html();
  3. //预编译模板
  4. var template = Handlebars.compile(tpl);
  5. /**************初始化数据表格****************************/
  6. dataTable = $("#dataGrid").dataTable({
  7. "language": {
  8. "url": "${ctp}/jqueryplugin/datatables/js/Chinese.json"
  9. },
  10. //processing: true,
  11. serverSide: true,
  12. ajax: {
  13. url: '${ctp}/rest/dock/listDockQuestion',
  14. type: 'POST'
  15. },
  16. /**
  17. id,moId,createTime,processDate,questionType,
  18. questionContent,accessChannel,contactId,processResult,processDescription
  19. interfaceId,questionDetail,batchId,contactName,sequence
  20. */
  21. "columns": [
  22. { "data": "id","targets": -1,"visible": false  },
  23. { "data": "sequence","targets": 0 },
  24. { "data": "interfaceId","targets": 1 },
  25. { "data": "questionType" ,"targets": 2},
  26. { "data": "questionContent","targets": 3 },
  27. { "data": "processDate" ,"targets": 4},
  28. { "data": "contactName" ,"targets": 5},
  29. { "data": "processResult" ,"targets": 6} ,
  30. { "data": "processDate" ,"targets": 7},
  31. { "data": "questionDetail" ,"targets": 8},
  32. { "data": "batchId" ,"targets": 9,"visible": false }
  33. ],
  34. //自定义功列
  35. "columnDefs": [
  36. {
  37. "render": function ( data, type, row ) {
  38. return $("#interfaceId_"+data).val();
  39. },
  40. "targets": 2
  41. },
  42. {
  43. "render": function ( data, type, row ) {
  44. return $("#questionType_"+data).val();
  45. },
  46. "targets": 3
  47. },
  48. {
  49. "render": function ( data, type, row ) {
  50. return $("#processResult_"+data).val();
  51. },
  52. "targets": 7
  53. },
  54. {
  55. "render": function ( data, type, row ) {
  56. var questionType=row['questionType'];
  57. return $("#TEC_PROBLEM_"+questionType+"_DETAIL_"+data).val();
  58. },
  59. "targets": 4
  60. },
  61. {
  62. "render": function ( data, type, row ) {
  63. var status=row['processResult'];
  64. var context =null;
  65. if("99"==status){
  66. context =
  67. {
  68. func:[
  69. {"name": "详", "fn": "viewDockQuestion('"+row['id']+"')", "type": "5"}
  70. ]
  71. };
  72. }else{
  73. context =
  74. {
  75. func:[
  76. {"name": "办", "fn": "updateDockQuestion('"+row['id']+"')", "type": "5"}
  77. ]
  78. };
  79. }
  80. var html = template(context);
  81. return html;
  82. },
  83. "targets": 11
  84. }
  85. ],
  86. //创建行回调函数  创建行之后
  87. "createdRow": function ( row, data, index ) {
  88. tmpData.push(data);
  89. }
  90. });
  91. dataGrid=dataTable;
  92. }

columnDefs属性render 用来自定义表格显示的数据,通常我们有些反显数据时会用到,以及我们自定义一些操作写一下function时会使用到 target 用来指向表格的哪一列。 createdRow   事件是指创建完一行之后触发的事件,通过这一事件我们可以做些我们需要的工作。

接下来就是如何解决服务端如何分页的问题,下面是一段Java代码供大家进行参考,在代码之后我会进行一个简单描述

  1. @POST
  2. @Path("listDockQuestion")
  3. @Produces(MediaType.APPLICATION_JSON)
  4. public Object getDockQuestionList(@FormParam(value = "start") long start, @FormParam(value = "length") long length,
  5. @FormParam(value = "draw") String draw) {
  6. /**
  7. * { "draw": 1, "recordsTotal": 57, "recordsFiltered": 57, "data": [ { }]}
  8. */
  9. // 获取Datatables发送的参数 必要
  10. // 定义查询数据总记录数
  11. // 条件过滤后记录数 必要recordsFiltered
  12. // 表的总记录数 必要 recordsTotal
  13. Map<String, Object> paramMap = new HashMap<String, Object>();
  14. paramMap.put("start", start);
  15. paramMap.put("length", length);
  16. paramMap.put("end", start + length);
  17. Map<String, Object> respMap = new HashMap<String, Object>();
  18. // respMap.put("draw", "1");
  19. Long sum = dockService.countDockQuestion(paramMap);
  20. respMap.put("recordsTotal", sum);
  21. respMap.put("recordsFiltered", sum);
  22. respMap.put("data", dockService.listDockQuestion(paramMap));
  23. return respMap;
  24. }

  { "draw": 1, "recordsTotal": 57, "recordsFiltered": 57, "data": [ { }]} 是要返回的json数据格式,datatables向服务端传的参数中两个重要参数是我们分页使用到的,(start +1) 是从数据库中的哪一行开始取值,如果要去第11行的数据开始取值,start会传入10,而length是指要取多少行数据,这对于mysql数据的分页写sql非常方便只需要在自己SELECT语句之后加上 LIMIT  start, length  。draw是请求的序号,start是数据的偏移量,length是需要返回的最大数据条数

        下面一段代码是表格异步刷新的插件fnReloadAjax代码

  1. /**
  2. * By default DataTables only uses the sAjaxSource variable at initialisation
  3. * time, however it can be useful to re-read an Ajax source and have the table
  4. * update. Typically you would need to use the `fnClearTable()` and
  5. * `fnAddData()` functions, however this wraps it all up in a single function
  6. * call.
  7. *
  8. * DataTables 1.10 provides the `dt-api ajax.url()` and `dt-api ajax.reload()`
  9. * methods, built-in, to give the same functionality as this plug-in. As such
  10. * this method is marked deprecated, but is available for use with legacy
  11. * version of DataTables. Please use the new API if you are used DataTables 1.10
  12. * or newer.
  13. *
  14. *  @name fnReloadAjax
  15. *  @summary Reload the table's data from the Ajax source
  16. *  @author [Allan Jardine](http://sprymedia.co.uk)
  17. *  @deprecated
  18. *
  19. *  @param {string} [sNewSource] URL to get the data from. If not give, the
  20. *    previously used URL is used.
  21. *  @param {function} [fnCallback] Callback that is executed when the table has
  22. *    redrawn with the new data
  23. *  @param {boolean} [bStandingRedraw=false] Standing redraw (don't changing the
  24. *      paging)
  25. *
  26. *  @example
  27. *    var table = $('#example').dataTable();
  28. *
  29. *    // Example call to load a new file
  30. *    table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
  31. *
  32. *    // Example call to reload from original file
  33. *    table.fnReloadAjax();
  34. */
  35. jQuery.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
  36. {
  37. // DataTables 1.10 compatibility - if 1.10 then `versionCheck` exists.
  38. // 1.10's API has ajax reloading built in, so we use those abilities
  39. // directly.
  40. if ( jQuery.fn.dataTable.versionCheck ) {
  41. var api = new jQuery.fn.dataTable.Api( oSettings );
  42. if ( sNewSource ) {
  43. api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );
  44. }
  45. else {
  46. api.ajax.reload( fnCallback, !bStandingRedraw );
  47. }
  48. return;
  49. }
  50. if ( sNewSource !== undefined && sNewSource !== null ) {
  51. oSettings.sAjaxSource = sNewSource;
  52. }
  53. // Server-side processing should just call fnDraw
  54. if ( oSettings.oFeatures.bServerSide ) {
  55. this.fnDraw();
  56. return;
  57. }
  58. this.oApi._fnProcessingDisplay( oSettings, true );
  59. var that = this;
  60. var iStart = oSettings._iDisplayStart;
  61. var aData = [];
  62. this.oApi._fnServerParams( oSettings, aData );
  63. oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
  64. /* Clear the old information from the table */
  65. that.oApi._fnClearTable( oSettings );
  66. /* Got the data - add it to the table */
  67. var aData =  (oSettings.sAjaxDataProp !== "") ?
  68. that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
  69. for ( var i=0 ; i<aData.length ; i++ )
  70. {
  71. that.oApi._fnAddData( oSettings, aData[i] );
  72. }
  73. oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
  74. that.fnDraw();
  75. if ( bStandingRedraw === true )
  76. {
  77. oSettings._iDisplayStart = iStart;
  78. that.oApi._fnCalculateEnd( oSettings );
  79. that.fnDraw( false );
  80. }
  81. that.oApi._fnProcessingDisplay( oSettings, false );
  82. /* Callback user function - for event handlers etc */
  83. if ( typeof fnCallback == 'function' && fnCallback !== null )
  84. {
  85. fnCallback( oSettings );
  86. }
  87. }, oSettings );
  88. };

        下面的脚本是如何调用该插件来实现datatables异步刷新

    1. dataGrid.fnReloadAjax();

datatables的使用的更多相关文章

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

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

  2. JQuery Datatables Columns API 参数详细说明

    ---恢复内容开始--- Data Tables: http://datatables.NET/ Version: 1.10.0 Columns说明 虽然我们可以通过DOM直接获取DataTables ...

  3. datatables中的Options总结(3)

    datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...

  4. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...

  5. datatables中的Options总结(1)

    datatables中的Options总结(1) 最近一直研究dataTables插件,下面是总结的所有的选项内容,用了帮助学习datatables插件. 这些选项的配置在$().Datatable( ...

  6. Datatables事件

    DataTables格式化渲染加上的html代码按一般方式绑定事件可能会没效果,通过以下方式可以解决 $(document).on("click","#checkchil ...

  7. jquery Datatables 行数据删除、行上升、行下降功能演示

    Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...

  8. JQuery表格插件DataTables 当前页合计功能

    公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...

  9. datatables服务器端分页要点

    背景:当要查询大量数据的时候,有datatables自身的分页,明显查询比较慢,这是要使用服务器端分页 参数:"bServerSide": true, "fnServer ...

  10. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

随机推荐

  1. adobe flash player 下载地址

    1. https://www.adobe.com/cn/products/flashplayer/distribution3.html

  2. Spark- Spark普通Shuffle操作的原理剖析

    在spark中,什么情况下会发生shuffle? reduceByKey,groupByKey,sortByKey,countByKey,join,cogroup等操作. 默认的shuffle操作的原 ...

  3. css 动画的例子

    1. [代码]   <!DOCTYPE HTML><html><head><meta charset="utf-8"><tit ...

  4. Codeforces 429B Working out:dp【枚举交点】

    题目链接:http://codeforces.com/problemset/problem/429/B 题意: 给你一个n*m的网格,每个格子上有一个数字a[i][j]. 一个人从左上角走到右下角,一 ...

  5. 创建第一个Servlet并定制Sevlet模板

    我们已经为eclipse配好了Tomcat服务器,创建了Web工程,现在是时候该创建一个Servlet向世界问好了! 第一步:创建一个Web工程,选中”src“文件夹 -->单击右键,鼠标移到” ...

  6. appium界面元素介绍

    一.主窗口 主页面顶部从左到右依次是: AndroidSettings:android相关的设置 GeneralSettings:全局设置,设置appium相关的内容 DeveloperSetting ...

  7. leetcode 35 Search Insert Position(二分法)

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  8. python实现redis三种cas事务操作

    cas全称是compare and set,是一种典型的事务操作. 简单的说,事务就是为了存取数据库中同一数据时不破坏操作的隔离性和原子性,从而保证数据的一致性. 一般数据库,比如MySql是如何保证 ...

  9. [转]CSS禁止文字选择

    user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行 ...

  10. jumpserver遇到的坑

    安装:https://github.com/jumpserver/jumpserver,看readme照着做就行,下面是遇到的坑.   0.4.4版坑: 1.要升级pip,否则有的包装不上   2.p ...