0 0

jQuery dataTables使用的时候,返回json数据填充,不能进行分页,而是显示全部数据20

今天遇到这样的问题,就是利用jQuery dataTables表格插件,将我后台返回来的JSON数据填充,但是不能分页,而是显示全部的数据,很奇怪,这是运行的截图和jQuery dataTables参数的设置,大牛们帮忙看看,小弟也是刚接触jQuery dataTables。
function loadCustomerInfo(){
	var datatable;
	if(datatable == undefined || datatable == "undefined" || datatable == null){
		$("#exportTable").show();    
		datatable=$("#exportTable").dataTable({ 
			"sPaginationType": "full_numbers",
			"bFilter":false,
			"bSort":false,
			"iDisplayLength": 5,
			"bRetrieve":true,
			"bPaginate":true,
			"bLengthChange": false,
			"bStateSave" :false,
			"bServerSide": true,
			"aoColumns": [   {"mDataProp":"customerID"},
			                 {"mDataProp":"customerName"},
			                 {"mDataProp":"customerTel"},
			                 {"mDataProp":"salesDate"},
			                 {"mDataProp":"operate",
			                	 "mRender": function(data, type, full) {
			                	 return '<A href="../OrderdetailsServlet?customerID='+data+'" target="_blank">订单详情</A>';}
			                 }],
			"oLanguage":{
				 "sLengthMenu": "每页显示 _MENU_ 条记录",   
	                        "sZeroRecords": "没有检索到数据",   
	                        "sInfo": "显示 _START_-_END_ 条数据;共有 _TOTAL_ 条记录",   
	                        "sInfoEmtpy": "没有数据",   
	                        "sProcessing": "正在加载数据...",   
	                        "oPaginate": 
	                        {   
	                            "sFirst": "首页",   
	                            "sPrevious": "上一页",   
	                            "sNext": "下一页",   
	                            "sLast": "尾页"  
	                        }   

			},
		"sAjaxSource" : "../CustomerServlet?rand="+Math.random(),
			"fnServerData" : function(sSource, aoData, fnCallback){
				$.getJSON(
						sSource,
						{contractID:$("#contractID").val(),
						customerName:encodeURI(encodeURI($("#customerName").val())),
						customerTel:$("#customerTel").val(),
						aoData:JSON.stringify(aoData)} ,
							function callback(data){
								fnCallback(data);
				});
			}
	});
	}
	else{
		datatable.fnDestroy();
	}
	datatable.fnDraw();
}



[img]

[/img]
2013年5月01日 16:00
  • 大小: 89.8 KB

3个答案 按时间排序 按投票排序

0 0

采纳的答案

datatables如果你想实现后台分页的话,那么每次ajax请求他会自动附加几个参数包括iDisplayStart,iDisplayLength, iSort,你需要在后台自己接收这几个参数,然后在获取数据的程序中,自己进行分页操作。

2013年5月02日 09:35
0 0

你看下jquery easyui API,有个pagesize和pagelis,需要设置一下!

2013年5月02日 15:56
0 0

后台第一次查询的时候页码和每页的记录数传到后台了么?打印下sql就知道了

2013年5月01日 19:06

相关推荐

    FaceTest[存储过程和JSON及Jquery]动态生成表格及分页

    对于分页,jQuery插件如"jQuery DataTables"提供了完整的分页、排序、过滤功能,只需少量代码即可实现。 4. 动态生成表格: 在FaceTest项目中,前端接收到JSON数据后,可以使用jQuery遍历数据数组,创建HTML表格...

    22-08-09-062_JsonTable(基本设置Jquery DataTables)

    Jquery DataTables是一款强大的JavaScript库,它提供了丰富的功能,如数据排序、搜索、分页等,极大地提升了网页表格的用户体验。本教程将聚焦于“22-08-09-062_JsonTable(基本设置Jquery DataTables)”这一主题,教...

    jQuery实现Table分页跳转

    在网页开发中,数据展示往往是不可或缺的部分,特别是当数据量较大时,分页功能显得尤为重要。jQuery是一个轻量级的JavaScript库,它提供了一系列方便、高效的方法来操作DOM,实现复杂的交互效果,包括Table的分页...

    Jquery Datatables的使用详解

    Jquery Datatables是一款功能强大的jQuery插件,专用于表格处理,尤其在数据展示、排序、分页和过滤等方面表现出色。它支持与多种前端框架如Bootstrap3/4和JqueryUI的兼容,提供了丰富的样式选择。Datatables允许...

    Bootstrap表格控件的使用,与JAVA后台数据连接,可自动翻页

    返回的数据通常是一个JSON对象,包含数据列表和总记录数等信息,以便前端判断是否需要显示分页条。 此外,为了优化用户体验,可以考虑添加加载提示、错误处理和数据缓存等机制。加载提示可以在数据加载期间显示,...

    table响应式标签页面+json数据.rar

    当页面加载或用户触发特定事件时,通过Ajax请求获取JSON数据,然后使用JavaScript将数据填充到表格中,实现动态交互。 4. **Bootstrap表格组件**:Bootstrap提供了多种预定义的表格样式,如`.table`, `.table-...

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

    在这个`DataTablesAspNetMvcDemo`项目中,我们将看到如何在控制器中处理请求,获取数据并将其格式化为适合DataTables的JSON格式,然后在视图中使用Jquery DataTables进行渲染。 1. **安装与引用** 要在项目中使用...

    datagrid 接收数据常用方法

    例如,使用jQuery的`$.ajax`或`$.getJSON`方法获取数据,然后使用JavaScript解析数据并手动填充datagrid。 4. Web服务/REST API:现代Web应用常使用Web服务或RESTful API作为数据源。datagrid会发送HTTP请求获取...

    基于dataTables组件的图书管理(前端简要设计)

    综上所述,本项目涉及到前端开发中的多个关键技术和工具,包括使用DataTables展示和操作数据,Bootbox提供交互反馈,以及通过JSON文件进行数据交换。掌握这些技术对于构建一个功能完备的图书管理系统至关重要。同时...

    JQuery.DataTable

    如果数据源是JSON格式,DataTables会自动解析并填充到表格中。 ### 5. 自定义列和排序 你可以通过`columns`参数来定义每一列的显示和排序规则,例如: ```javascript $(document).ready(function() { $('#...

    动态加载bootstrap表格数据

    动态加载数据是指在用户交互时,不预先一次性加载所有数据,而是根据需要从服务器获取并显示部分或全部数据。这种技术在大数据量或者需要实时更新的场景下特别有用,因为它可以减少页面加载时间,提高用户体验。 在...

    jquery DataTable实现前后台动态分页

    最后,当DataTables接收到服务器返回的JSON数据后,它会自动处理并填充到表格中,实现动态分页的效果。 总的来说,jQuery DataTable通过与服务器端的交互,实现了数据的动态加载和分页,降低了前端内存消耗,提高了...

    JQuery 自定义 Table

    - 利用jQuery的`$.ajax`或`$.getJSON`异步获取服务器数据,动态填充表格,实现数据的实时更新。 9. **性能优化**: - 使用事件委托提高性能,如`$("table").on("click", "tr", function() {...})`,而非直接绑定...

    jQuery表格特效

    例如,使用`$.ajax()`或`$.getJSON()`方法从后端获取JSON数据,然后利用`append()`或`html()`函数填充表格元素。 其次,jQuery提供了丰富的动画效果,可以为表格元素添加过渡和动画。例如,使用`.fadeIn()`和`....

    jquery表格操作实例

    这里假设`data.json`返回一个JSON数组,每个对象有`column1`和`column2`属性,这些数据会被填充到表格中。 除了基本操作,jQuery还有许多插件如DataTables,它提供了高级功能,如排序、过滤、分页等。通过引入...

    table控件生成数据

    "根据数据生成表格"指的是从数据库、CSV文件、JSON对象或其他数据源获取数据,并将其动态地填充到表格中。这通常涉及数据绑定技术,将数据模型与视图(即表格)连接起来,当数据改变时,表格会自动更新。例如,使用...

    jquery 动态表格

    可以使用JSON对象或者数组来存储数据,然后利用jQuery将数据填充到表格中。如上例所示,`data`变量就是存放表格数据的二维数组。 三、jQuery动态表格进阶 1. 表格操作: jQuery提供了一系列方法用于操作表格,如...

    jquery表格插件

    1. **数据绑定**:将服务器返回的数据动态填充到表格中,支持JSON、XML等多种数据格式。 2. **排序**:用户可以点击列头对数据进行升序或降序排序。 3. **过滤**:允许用户输入关键词,筛选出符合要求的行。 4. **...

    jQuery动态创建表格生成器代码.zip

    4. **数据绑定**:动态表格通常与后端数据源结合,可以使用Ajax请求获取数据,然后将数据填充到表格中。`$.ajax()`或`$.getJSON()`是常用的异步请求函数。 5. **事件监听**:jQuery的`.on()`方法允许我们为元素绑定...

    Jquery创建动态表格

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、...此外,对于更复杂的需求,你可能需要考虑使用如Datatables这样的专门的jQuery表格插件,它们提供了更多的高级功能,如排序、过滤、分页等。

Global site tag (gtag.js) - Google Analytics