`

jquery dataTable

 
阅读更多

看产品里数据显示用了dataTable,自己写了一小段测试了一下

JS:

	$(document).ready(function() {
	      var config_ext = {
           "aaSorting":[[0, "asc"]],
           "bAutoWidth": false,
           "bServerSide": true,
           "sAjaxSource": "${ctx}/plans?action=ajax",
           "sServerMethod": "POST",
           "fnServerParams": function ( aoData ) {
           	//aoData.push( { "name": "companyInfo.companyName", "value": $("#searchCompanyName").val() } );
           	//aoData.push( { "name": "companyInfo.certiCode", "value": $("#searchCertiCode").val() } );
           },
           "fnDrawCallback": function( oSettings ) {
           		$("#datatable td a").css("margin-left", "12px");
           },
		   "aoColumns": [
           	{ "mDataProp": "planName"},
            { "mDataProp": "ownerName"},
            { "mDataProp": "startTime"},
            { "mDataProp": "endTime"},
            { "mDataProp": "executeTime"},
            
            { "mDataProp": "planId","fnRender": function(obj) {
                   var str = "";
                   if(obj && obj.aData && obj.aData.planId){
                	   var planId = obj.aData.planId;
                	   str =
	                   	"<a href='${ctx}/planDetails?planId="+planId+"'>"
	                   	+"<i class='splashy-documents_edit'></i>详细信息"
	                   +"</a>"
                   }
                   return str;
               }, "bSortable": false}
             ]
          };
      var table_config = jQuery.extend({}, def_dt_config, config_ext);
	  var dt = $('#datatable').dataTable(table_config);
      $('#search').live("click",function(){
          var oSettings = dt.fnSettings();
          dt.fnDraw();
      });
	  });

 

 

  html:

            <table id="datatable" class="table table-bordered table-striped">
							  <thead>
								  <tr>
									  <th>计划名称</th>
									  <th>计划执行者</th>
									   <th>计划开始时间</th>
									    <th>计划结束时间</th>
									    <th>运行总时间</th>
									   <th>操作</th>
								  </tr>
							  </thead>
							  <tbody>
							  </tbody>
			</table>

 

 servlet:

		 String sStart = request.getParameter("iDisplayStart");
	     String sAmount = request.getParameter("iDisplayLength");
	        
		List<Plan> list = new ArrayList<Plan>();
		list.add(new Plan("plan1","test1", "lidao"));

		Map<String, Object> result = new HashMap<String, Object>();
		result.put("iTotalRecords", 12);
		result.put("iTotalDisplayRecords", 10);
		result.put("aaData", list);
		
		String json = com.alibaba.fastjson.JSON.toJSONString(result);
		
		
		PrintWriter out = response.getWriter();
		
		out.write(json);
		out.flush();  
        out.close();

 

 

 

 

分享到:
评论

相关推荐

    Jquery dataTable中文API中文文档

    ### JQuery DataTable API中文文档知识点概览 #### 一、简介 JQuery DataTable 是一个高度灵活且功能丰富的插件,能够将HTML表格转换成具有高级交互性的动态表格。它支持复杂的数据排序、搜索、分页等功能,并能很...

    Jquery dataTable显示指定列

    在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...

    Jquery dataTable完整例子(取数据、分页、样式等)

    在本文中,我们将深入探讨jQuery DataTable插件,它是一个强大的数据展示工具,广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件...

    Jquery dataTable后台获取数据示例

    **jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...

    jquery datatable api chm 中文

    jquery datatable api chm 中文

    jQuery Datatable 自定义列1

    jQuery Datatable 自定义列1 jQuery Datatable 是一个功能强大的表格工具,提供了许多实用的功能,例如排序、分页、查找等。在本文中,我们将重点讲解如何对 Datatable 中的表格内容进行操作,包括改变样式、增加一...

    JQuery DataTable中文文档API.chm

    初始化`DataTable`时,可以设置一系列参数来定制其行为,如`columnDefs`用于定义列的样式和行为,`ordering`控制列的排序,`searching`定义是否启用全局搜索,`paging`控制分页功能等。 **3. 表格操作(Table ...

    jquery datatable 单元格合并

    在IT领域,jQuery DataTables是一款广泛使用的数据展示插件,它提供了丰富的功能,如排序、搜索、分页等。在某些场景下,我们可能需要对表格中的单元格进行合并,以便更好地展示数据,例如汇总或者分类。本篇将详细...

    Jquery dataTable完整例子(分页,带文档)

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!

    Jquery DataTable使用经典案例

    在.Net下使用Jquery DataTable,首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以通过NuGet包管理器安装jQuery,然后从CDN或本地资源路径引入DataTable的库文件,例如: ```html ...

    jquery datatable serverside page 服务器端分页

    **jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...

    jquery datatable 大数据分页面的解决方案

    ### jQuery DataTable大数据分页解决方案详解 #### 一、概述 在处理大数据时,尤其是在Web应用中展示大量数据,如何高效地进行数据分页是一项重要的技术挑战。jQuery DataTable插件因其强大的功能和灵活性,在Web...

    Structs 2 Action 与 JQuery Datatable 的整合

    2. **JSON数据格式化**:由于JQuery Datatable通常使用JSON数据格式来获取服务器端数据,Action需要将处理后的数据转换为JSON格式,可以通过使用Struts 2的JSON插件或自定义Result类型来实现。 3. **Ajax请求设置**...

    Jquery DataTable基于Twitter Bootstrap的样式

    Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码

    Jquery Datatable editor 1.5.4破解版本

    Jquery Datatable editor,功能很强大,使用的人可能不多,但真的好用。目前新版(1.5.6)已经是加密版本,没有破解,就退而示其次,使用这个版本。 如果发现有问题,就在dataTables.editor.min.js文件把 var K4O={'...

    jquery datatable

    $('#example').DataTable({ data: [ // 数据数组 ], columns: [ { title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Age" }, { title: "Start date" }, { title: "Salary" } ] ...

    Jquery DataTable Bootstrap Based Admin Template - Material Design

    ### Jquery DataTable Bootstrap Based Admin Template - Material Design #### 概述 Jquery DataTable Bootstrap Based Admin Template - Material Design 是一个基于 Jquery 和 Bootstrap 的管理界面模板,该模板...

    Jquery dataTable完整例子下载(取数据、分页、样式等)

    **jQuery DataTables 全面解析** `jQuery DataTables` 是一个功能强大的JavaScript库,用于将HTML表格转换为高度交互的数据展示工具。它提供了丰富的功能,包括数据检索、排序、过滤、分页和自定义样式,使得网页上...

    jquery DataTable实现前后台动态分页

    这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先,确保在HTML文件中引入了必要的CSS和JavaScript库,如jQuery核心库、DataTables库以及Bootstrap样式库(如果需要的话)。在提供的代码中,可以...

    JQuery DataTable 插件 V2.0

    **jQuery DataTables插件V2.0详解** jQuery DataTables是一款功能强大的JavaScript表格插件,它为HTML表格提供了丰富的交互式功能,如排序、搜索、分页和自定义数据处理等。在V2.0版本中,这个插件进一步提升了性能...

Global site tag (gtag.js) - Google Analytics