今天遇到这样的问题,就是利用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]
相关推荐
对于分页,jQuery插件如"jQuery DataTables"提供了完整的分页、排序、过滤功能,只需少量代码即可实现。 4. 动态生成表格: 在FaceTest项目中,前端接收到JSON数据后,可以使用jQuery遍历数据数组,创建HTML表格...
Jquery DataTables是一款强大的JavaScript库,它提供了丰富的功能,如数据排序、搜索、分页等,极大地提升了网页表格的用户体验。本教程将聚焦于“22-08-09-062_JsonTable(基本设置Jquery DataTables)”这一主题,教...
在网页开发中,数据展示往往是不可或缺的部分,特别是当数据量较大时,分页功能显得尤为重要。jQuery是一个轻量级的JavaScript库,它提供了一系列方便、高效的方法来操作DOM,实现复杂的交互效果,包括Table的分页...
Jquery Datatables是一款功能强大的jQuery插件,专用于表格处理,尤其在数据展示、排序、分页和过滤等方面表现出色。它支持与多种前端框架如Bootstrap3/4和JqueryUI的兼容,提供了丰富的样式选择。Datatables允许...
返回的数据通常是一个JSON对象,包含数据列表和总记录数等信息,以便前端判断是否需要显示分页条。 此外,为了优化用户体验,可以考虑添加加载提示、错误处理和数据缓存等机制。加载提示可以在数据加载期间显示,...
当页面加载或用户触发特定事件时,通过Ajax请求获取JSON数据,然后使用JavaScript将数据填充到表格中,实现动态交互。 4. **Bootstrap表格组件**:Bootstrap提供了多种预定义的表格样式,如`.table`, `.table-...
在这个`DataTablesAspNetMvcDemo`项目中,我们将看到如何在控制器中处理请求,获取数据并将其格式化为适合DataTables的JSON格式,然后在视图中使用Jquery DataTables进行渲染。 1. **安装与引用** 要在项目中使用...
例如,使用jQuery的`$.ajax`或`$.getJSON`方法获取数据,然后使用JavaScript解析数据并手动填充datagrid。 4. Web服务/REST API:现代Web应用常使用Web服务或RESTful API作为数据源。datagrid会发送HTTP请求获取...
综上所述,本项目涉及到前端开发中的多个关键技术和工具,包括使用DataTables展示和操作数据,Bootbox提供交互反馈,以及通过JSON文件进行数据交换。掌握这些技术对于构建一个功能完备的图书管理系统至关重要。同时...
如果数据源是JSON格式,DataTables会自动解析并填充到表格中。 ### 5. 自定义列和排序 你可以通过`columns`参数来定义每一列的显示和排序规则,例如: ```javascript $(document).ready(function() { $('#...
动态加载数据是指在用户交互时,不预先一次性加载所有数据,而是根据需要从服务器获取并显示部分或全部数据。这种技术在大数据量或者需要实时更新的场景下特别有用,因为它可以减少页面加载时间,提高用户体验。 在...
最后,当DataTables接收到服务器返回的JSON数据后,它会自动处理并填充到表格中,实现动态分页的效果。 总的来说,jQuery DataTable通过与服务器端的交互,实现了数据的动态加载和分页,降低了前端内存消耗,提高了...
- 利用jQuery的`$.ajax`或`$.getJSON`异步获取服务器数据,动态填充表格,实现数据的实时更新。 9. **性能优化**: - 使用事件委托提高性能,如`$("table").on("click", "tr", function() {...})`,而非直接绑定...
例如,使用`$.ajax()`或`$.getJSON()`方法从后端获取JSON数据,然后利用`append()`或`html()`函数填充表格元素。 其次,jQuery提供了丰富的动画效果,可以为表格元素添加过渡和动画。例如,使用`.fadeIn()`和`....
这里假设`data.json`返回一个JSON数组,每个对象有`column1`和`column2`属性,这些数据会被填充到表格中。 除了基本操作,jQuery还有许多插件如DataTables,它提供了高级功能,如排序、过滤、分页等。通过引入...
"根据数据生成表格"指的是从数据库、CSV文件、JSON对象或其他数据源获取数据,并将其动态地填充到表格中。这通常涉及数据绑定技术,将数据模型与视图(即表格)连接起来,当数据改变时,表格会自动更新。例如,使用...
可以使用JSON对象或者数组来存储数据,然后利用jQuery将数据填充到表格中。如上例所示,`data`变量就是存放表格数据的二维数组。 三、jQuery动态表格进阶 1. 表格操作: jQuery提供了一系列方法用于操作表格,如...
1. **数据绑定**:将服务器返回的数据动态填充到表格中,支持JSON、XML等多种数据格式。 2. **排序**:用户可以点击列头对数据进行升序或降序排序。 3. **过滤**:允许用户输入关键词,筛选出符合要求的行。 4. **...
4. **数据绑定**:动态表格通常与后端数据源结合,可以使用Ajax请求获取数据,然后将数据填充到表格中。`$.ajax()`或`$.getJSON()`是常用的异步请求函数。 5. **事件监听**:jQuery的`.on()`方法允许我们为元素绑定...
在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、...此外,对于更复杂的需求,你可能需要考虑使用如Datatables这样的专门的jQuery表格插件,它们提供了更多的高级功能,如排序、过滤、分页等。