`
只是随手瞎打
  • 浏览: 28047 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

jquery datatables 简单应用

 
阅读更多
function search() {
		table = $('#table')
				.dataTable(
						{
							searching : false,
							bLengthChange : false,
							paging : true,
							ordering : false,
							bFilter : true,
							info : true,
							bDestroy : true,
							iDisplayLength : 20,
							sPaginationType : "full_numbers",
							oLanguage : {
								sLengthMenu : "每页显示 _MENU_ 条记录",
								sZeroRecords : "抱歉, 没有找到",
								sInfo : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
								sInfoEmpty : "没有数据",
								sProcessing : "正在加载数据...",
								sInfoFiltered : "(从 _MAX_ 条数据中检索)",
								sZeroRecords : "没有检索到数据",
								sSearch : "名称:",
								oPaginate : {
									sFirst : "首页",
									sPrevious : "前一页",
									sNext : "后一页",
									sLast : "尾页"
								}
							},
							/* iDisplayStart : function(){
								var start = parseInt($("page"));
								return start;
								
							}, */
							bProcessing : false,
							bServerSide : true,
							sAjaxSource : "acLogAction!findLogList",
							fnServerData : function(sSource, aoData, fnCallback) {
								aoData.push({
									"msn" : $("#p_msn").val(),
									"log_no" : $("#log_no").val(),
									"log_date" : $("#log_date").val(),
									"log_date2" : $("#log_date2").val()

								});

								$.ajax({
									type : 'post',
									url : sSource,
									dataType : "json",
									data : {
										aoData : JSON.stringify(aoData)
									},
									success : function(resp) {
										fnCallback(resp);
										 $("[name='dis']").parent().hide();
									}
								});
							},
							columns : [ {
								data : "ITEM1", //要与后台传来的字段对应
								name : "ITEM1"  //表格表头
							}, {
								data : "ITEM2",
								name : "ITEM2"
							}, {
								data : "ITEM3",
								name : "ITEM4"
							}, {
								data : "ITEM4",
								name : "ITEM4"
							}, {
								data : "ID",
								name : "id"
							} ],
							columnDefs : [
									{   //隐藏列
										targets : [ 4 ],
										mRender : function(data, type, full) {
											return "<input name='dis' hidden=true value='"+data+"'></input>"
										}
									},
									{   //加链接
										targets : [ 1 ],
										mRender : function(data, type, full) {
											return "<a href='acLogAction!addLogLegJsp?log_id="+full.LOG_ID+"&log_no="+full.LOG_NO+"&log_date="+full.LOG_DATE+"&msn="+data+"'>"+data+"</a>"
										}
									} ],

						});
		
	}


后端需返回给前端的数据,参数名必须是这些
 map.put("aaData", "查询数据的LIST");  //必须为 aaData,显示在表格的数据
		map.put("iTotalRecords","总条数");  //必填项
		map.put("iTotalDisplayRecords","总条数");//必填项
                map.put("sEcho", sEcho);

分享到:
评论

相关推荐

    jquery-dataTables简单实例

    **jQuery DataTables 简单实例** jQuery DataTables 是一个高度可配置的表格插件,它为HTML表格提供了丰富的功能,如排序、过滤、分页和数据导出等。在这个实例中,我们将深入理解如何使用jQuery DataTables创建...

    jquery dataTables组件

    **jQuery DataTables组件详解** jQuery DataTables是一款强大的数据表格插件,它允许开发者轻松地将HTML表格转化为功能丰富的数据展示工具。这个组件以其强大的搜索、排序、分页和过滤功能而受到广泛欢迎,尤其适用...

    jquery.dataTables包.rar

    《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件,它基于jQuery库,能够将HTML表格转化为具有高级特性的数据展示工具,如排序、搜索、分页等。"jquery.dataTables包....

    jQuery Datatables.zip

    一个简单的Datatables初始化示例: ```javascript $(document).ready(function() { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "/api/data", "columns": [ { "data": "name...

    jquery DataTables-1.9.4

    总的来说,`jQuery DataTables 1.9.4`是一个强大且易用的表格插件,适用于各种数据展示需求,无论是简单的数据列表还是复杂的数据管理应用,都能得心应手。通过其丰富的功能和良好的扩展性,可以极大地提高开发效率...

    Jquery dataTables插件

    jQuery DataTables插件是一款强大的数据展示工具,专为HTML表格设计,它提供了丰富的功能,如静态分页、排序、固定表头以及AJAX事件处理,让网页中的数据管理变得简单而高效。以下是对这个插件及其相关功能的详细...

    Datatables jquery表格插件

    Datatables是一款基于jQuery的开源表格插件,广泛应用于网页数据展示和管理。它以其丰富的功能、高度的灵活性和良好的社区支持而备受青睐。这个插件的主要目标是将静态或者动态生成的HTML表格转变为具有强大交互性的...

    Jquery Datatables的使用详解

    **jQuery DataTables 使用详解** jQuery DataTables 是一个功能丰富的JavaScript库,它为HTML表格提供了强大的增强功能,包括排序、搜索、分页以及更多的定制化选项。这个插件能够与Bootstrap 3/4、jQuery UI等前端...

    datatables_1.zip

    在这个"datatables_1.zip"压缩包中,我们有一个简单的jQuery DataTables应用实例,通过这个实例,我们可以深入学习和理解DataTables的使用方法。 首先,jQuery DataTables的核心功能包括数据的分页、排序、搜索和...

    datatables最简单的模板

    以下是对“datatables最简单的模板”及相关知识点的详细说明: 1. **Datatables简介**:Datatables是基于jQuery的开源插件,它能够将普通的HTML表格转化为功能丰富的数据展示工具,包括排序、搜索、分页等功能。它...

    jQuery表格插件datatables用法详解

    使用 Datatables 非常简单,通常在文档加载完成后,通过 jQuery 选择器初始化表格。 - 默认配置:只需在文档准备就绪时调用 `.dataTable()` 方法,如 `$(document).ready(function() { $('#example').dataTable();...

    jquery datables

    通过学习和应用jQuery DataTables,开发者能够创建出功能强大、界面友好的数据展示界面,提升网站或应用程序的数据管理效率。同时,由于其广泛的社区支持和持续的更新,遇到问题时通常可以找到解决方案或获得帮助,...

    jQuery表格插件DataTables

    DataTables广泛应用于网页开发,尤其是那些需要处理大量数据并需要高级筛选、排序和搜索功能的场景。 **1. DataTables的主要特性** - **数据源支持**:DataTables支持多种数据源,包括DOM(直接从HTML表格获取数据...

    DataTablesAspNetMvcDemo:asp.net mvc 5 项目中 Jquery Datatables 集成的演示

    在本文中,我们将深入探讨如何在ASP.NET MVC 5项目中集成Jquery DataTables库进行数据展示和操作。`DataTablesAspNetMvcDemo`是一个示例项目,它清晰地展示了这一集成过程,帮助开发者理解如何在实际应用中实现高效...

    datatables

    总之,Datatables是jQuery生态中的一个强大工具,无论是在简单的数据展示还是复杂的业务场景中,都能展现出强大的功能和灵活性。了解并掌握其使用方法,将极大地提升网页数据管理的效率和用户体验。

    datatables 示例

    在压缩包文件"yuui"中,可能包含了示例代码、CSS样式文件以及可能的示例数据,通过查看这些文件,你可以更深入地了解Datatables在实际项目中的应用方式。实践是学习的最佳途径,尝试将示例代码应用到自己的项目中,...

    jQuery插件dataTables添加序号列的方法

    总的来说,jQuery插件dataTables提供了丰富的自定义选项,使得在HTML表格中实现各种复杂功能变得简单。通过上述两种方式,你可以在dataTables中轻松添加序号列,提升用户体验。如果你在实际应用中遇到其他问题,欢迎...

    datatables.zip

    《jQuery DataTables库的核心功能与应用解析》 jQuery DataTables是一款强大的、高度可定制的数据展示插件,它基于JavaScript和CSS,提供了丰富的功能,能够将HTML表格转化为交互式的数据展示平台。在"datatables....

    jquery-Data tables

    《jQuery DataTables插件深度解析与应用》 jQuery DataTables是一款功能强大的JavaScript库,它能够将HTML表格转化为具有高级功能的数据展示工具。这个插件以其灵活性、可扩展性和丰富的特性深受开发者喜爱,常用于...

Global site tag (gtag.js) - Google Analytics