jquery表格datatables实例解析 直接加载和延迟加载

参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,
由于时间紧，省略了很多，所以总结份简化版的仅供参考。

1、直接加载，这个比较简单，如下

jsp用了bootstrap的栅格，js如下

后台传个json就行了，由于这个破项目表名都很奇葩凑合看吧。

List gxlist=new ArrayList();
      String sql="select * from ODS10000060";
      try {
        List

2、延迟加载
由于老项目用的struts1，造成前台form接收参数有问题，所以直接用servlet接收
前端jsp如1直接加载一样，js如下

function initDatatables(){
  /*var columns = new Array();
  $("#listTable thead th").each(function(index, element) {
    var fieldName=$(element).attr("fieldName");
    if(fieldName.indexOf('.')>0)fieldName=fieldName.substring(2);
    columns.push({"data":fieldName});
  }); 
  if($('#listTable').length<=0) return;
  //-- 列定义
  var columnDefs = new Array();
  $("#listTable thead th").each(function(index, element) {
    if($(element).attr("fieldType")!='VARCHAR'){        
      columnDefs.push({        
         "orderable": true, 
         "searchable" : false,
         "targets": index });
    }    
  });*/

  $('#listTable').DataTable( {
    "processing": true,//处理中显示
    "serverSide": true,//服务器处理 
    "sScrollY": 300,
    "sScrollX": "100%", 
    "columns":[{"data":"ID"},{"data":"YEAR"},{"data":"REGION"},{"data":"GYZCZ"},{"data":"QYS"}],
    /*"columns":columns,*/
    /*"columnDefs":columnDefs,*/
//   "bInfo": false,
//   "bPaginate": false,
//   "bFilter":false,/servlet/ComplexInquireServlet
//    "bLengthChange": false,
    "ajax": {
      "url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
      "type": "POST",
      "data": function ( d ) {
        var queryForm = document.queryConditionForm;                
        d['fieldCode'] = 'ID,YEAR,REGION,GYZCZ,QYS';
        d['tableCode'] = 'ODS10000030'; //表名
      }
    },
    "oLanguage": {
      "search" : "在表格中搜索:",
      "show" : "显示",
      "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" : "末页"
      },
      "oAria" : {
        "sSortAscending" : ": 以升序排列此列",
        "sSortDescending" : ": 以降序排列此列"
      }
    }
  } );
  showPage();
}


function showQueryTable(){
  //建table
  $('#secondtid').remove();
  $("#tid").append(
          "
" +
          "" +
          "" +
          "" +
          "" +
          "" +
          "" +
          "
id
年份
地区
工业总产值（万元）
企业数（家）
" +
          "
");
  //创建表头 
  /*$.ajax({
        url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action 
        data : {
          index : ''
        },
        type : 'post',
        success : function(data) {
          var dataObj = eval(data);
        },
        error : function() {
          alert("异常！");
        }
  });*/
  //填充数据
  initDatatables();
}

注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分

public class DatatablesLazyLoad extends HttpServlet{
  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.process(request, response);
  }

  /**
   * datatables 延迟加载 数据加载，flag标注details表示注入数据，titles表示注入标题。
   * @param request
   * @param response
   */
  private void process(HttpServletRequest request, HttpServletResponse response) {
    ServletContext servletContext=request.getSession().getServletContext();
    WebApplicationContext wac =WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
    DictionaryServiceImpl ds=(DictionaryServiceImpl)wac.getBean("oracledictionaryService");

    String flag = request.getParameter("flag");
    String tableCode = request.getParameter("tableCode");
    String fieldCode = request.getParameter("fieldCode");

    if(flag==null)return;
    if(flag.equals("titles")){

    }else if(flag.equals("details")){
      String draw = request.getParameter("draw");
      String start = request.getParameter("start");
      String length = request.getParameter("length");
      StringBuilder sql = new StringBuilder("select ");
      List titles = this.getTitles(tableCode,fieldCode,ds);
      for(int i=0;i0) sql.deleteCharAt(sql.lastIndexOf(","));
      sql.append(" from ").append(tableCode);
      sql.append(" where 1=1 ");
      String filterSql = getFilterSql(titles,request);
      Integer totalCount =ds.getSqlRecordCount("select count(*) from (" + sql.toString()+ ") tmp");
      Integer filterCount = ds.getSqlRecordCount("select count(*) from (" + sql.toString()+filterSql+ ") tmp");

      String[] strings = fieldCode.split(",");

      String orderSql = getOrderSql(strings,request);
      sql.append(filterSql);
      sql.append(orderSql);
      List

总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。