关于jquery datatable.js的延迟加载问题-中国学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
关于jquery datatable.js的延迟加载问题
来源：互联网 更新时间： 16:47:18 责任编辑：李志喜字体：
用户提出问题:关于jquery datatable.js的延迟加载问题,具体如下:
在网上看了很多这个问题，没找到想要的；我现在想实现第一次加载只查询出10条数据显示出来，点下一页时，再查询出数据显示出来；不知道各位博友有没有这方面的资料，求共享。
通过互联网整理获得以下解决方法:=================1楼=====================
我去，这也行~
=================2楼=====================
你可以参照下别人写的瀑布流之类的插件插件。
=================3楼=====================
如果不考虑到具体控件支持的问题，这就是一个后端分页，前端刷新或是AJAX取数据的过程。
题主这样问，我可能是孤陋寡闻了，不知道题主哪个不懂。
你要是完全不懂，建议找懂的开发。
要是懂一些，就不要问这么大的问题，就说说你卡在哪儿了？
意思就是datatable.js的延迟加载不会用，例如你查询出20条数据放在table里面，它就只对这20条分页
@清原卡尔: 不明白你在说啥。
@爱编程的大叔: 我明白@清原卡尔&的意思，他只能一次性读出所有的数据绑定到控件上进行分页，现在需要改为点1页的数据读取1页的数据。
@英雄莫问出处: 瞎猜我也会啊，问题是你提问题的人得学会不要让人猜。
如果只是不懂，这么简单的
var query=(from c in table
& & & & & & & & & select c).skip(pagesize*PageIndex).take(pagesize)
这样就是只查询第PageIndex+1页中Pagesize行的数据了。
题主的问题比这个严重多了，我猜出来一点，不想说而已。
@英雄莫问出处: 就是这个意思，我就问下在datatable.js中可以做不？
=================4楼=====================
亲爱的， &datatable.js这个jq的插件有分页的功能。 不知道你说的分页是啥意思， 没看懂&
我知道有分页，但是它那个分页是立即加载的，我就是想问下可不可以做成延迟加载
如果您还有更好的解决方法,请在最下面评论中留下您的解决方法
相关文章：
上一篇文章：下一篇文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号经检测你所在的网络可能存在爬虫，因资源限制，我们只能拒绝你的请求。
如果你是推酷的用户，可以以继续访问使用。
如有疑问，可将IP信息发送到
请求解封。datatables使用记录 - 博客频道 - CSDN.NET
分类：JAVAjfinalbeetSql
1：当前环境：jfinal+beetSql
2：所需文件：`jquery.dataTables.js和dataTables.bootstrap.js和bootstrap.css
3：第一步在html中建立该表格
&table id="example" class="table
table-striped table-bordered" cellspacing="0" width="100%"&
&th&序号&/th&
&th&权限名称&/th&
&th&模块名称&/th&
&th&控制名称&/th&
&th&方法名称&/th&
&th&操作&/th&
4：第二步，在该页面中引入&script src="/static/js/jquery.dataTables.min.js"&&/script&
&script src="/static/js/dataTables.bootstrap.min.js"&&/script&
这两个js文件
5：第三步，自己写一个js文件并引入页面&script src="/static/js/data_table.js"&&/script&
6：编写data_table.js
$(document).ready(function() {
$('#example').DataTable({
"serverSide": true,
"url": "/privilege/dataTest.html",
"deferRender": true
"columns" : [
"data" : "id",
"orderable" : false,
"sDefaultContent" : "",
"width" : "6%",
"data" : "pri_name",
"orderable" : false,
"sDefaultContent" : "",
"width" : "10%"
"data" : "module_name",
"orderable" : false,
"sDefaultContent" : "",
"width" : "10%"
"data" : "controller_name",
"orderable" : false,
"sDefaultContent" : "",
"width" : "3%",
"render" : function(data, type, full, meta) {
if(data==1){
data ="&a href='#' class='upOrderStatus' data-id="+full.id+"&有效&/a&";
data ="&a href='#' class='upOrderStatus' data-id="+full.id+"&&font color='red'&无效&/font&&/a&";
"mData" : "action_name",
"orderable" : false,
"sDefaultContent" : "",
"sWidth" : "10%"
"mData" : "id",
"orderable" : false,
"sDefaultContent" : '',
"sWidth" : "10%",
"render":function(data, type, full, meta){
data='&button id="deleteOne" class="btn btn-danger btn-sm" data-id='+data+'&删 除&/button&';
columnDefs: [
targets: 5,
render: function (a, b, c, d) {
var html = '&button data-id="#tpl_edit" data-action="'+ '/privilege/edit/' + c.id + '" type="button" class="js_edit am-btn am-btn-xs am-btn-primary"&修改&/button&'
+ '&button data-action="'+ '/privilege/delete/' + c.id + '" type="button" class="js_del am-btn am-btn-xs am-btn-danger"&删除&/button&';
“oLanguage” : { // 国际化配置
“sProcessing” : “正在获取数据，请稍后…”,
“sLengthMenu” : “显示 MENU 条”,
“sZeroRecords” : “没有找到数据”,
“sInfo” : “从 START 到
END 条记录 总记录数为 TOTAL 条”,
“sInfoEmpty” : “记录数为0”,
“sInfoFiltered” : “(全部记录数 MAX 条)”,
“sInfoPostFix” : “”,
“sSearch” : “搜索”,
“sUrl” : “”,
“oPaginate” : {
“sFirst” : “第一页”,
“sPrevious” : “上一页”,
“sNext” : “下一页”,
“sLast” : “最后一页”
initComplete:initComplete,
drawCallback: function( settings ) {
$('input[name=allChecked]')[0].checked=false;
ajax表示请求的地址，columns要和返回的json数据中的字段对应，并和table中的th对应
"serverSide": true, //启用服务模式这个表示后台分页
aoColumns[]数组中表示后端返回的json数据(也和table中的th的数量一致，所以这块容易出错)，mData表示json对象的属性名，orderable是否启动排序，sDefaultContent没有这个属性的情况下的默认值，sWidth表示th的宽度，render方法表示对接收到的json数据进行处理判断后显示，`
"render" : function(data, type, full, meta) {
//return data == 1 ? '有效' : '&font color="red"&无效&/font&';
if(data==1){
data ="&a href='#' class='upOrderStatus' data-id="+full.id+"&有效&/a&";
data ="&a href='#' class='upOrderStatus' data-id="+full.id+"&&font color='red'&无效&/font&&/a&";
data表示该json属性的值，type不清楚，full表示整个json对象，就是一整行的值，d不清楚，对data进行处理，再渲染
“columnDefs” :
“orderable” : false, // 禁用排序
“targets” : 0, // 指定的列
“data” : “id”,
“render” : function(data, type, full, meta) {
return ‘’;
该段代码表示字段再定义，也就是 用来接收json数据，改变输出格式的，例如上面表示将table第0列的一个input属性
接下来是国际化配置
“oLanguage” : { // 国际化配置
“sProcessing” : “正在获取数据，请稍后…”,
“sLengthMenu” : “显示 MENU 条”,
“sZeroRecords” : “没有找到数据”,
“sInfo” : “从 START 到
END 条记录 总记录数为 TOTAL 条”,
“sInfoEmpty” : “记录数为0”,
“sInfoFiltered” : “(全部记录数 MAX 条)”,
“sInfoPostFix” : “”,
“sSearch” : “搜索”,
“sUrl” : “”,
“oPaginate” : {
“sFirst” : “第一页”,
“sPrevious” : “上一页”,
“sNext” : “下一页”,
“sLast” : “最后一页”
一般这段可以直接复制即可
initComplete:initComplete,
drawCallback: function( settings ) {
$('input[name=allChecked]')[0].checked=
上面代码表示初始化完成时的回调函数
* 表格加载渲染完毕后执行的方法
* @param data
function initComplete(data){
//上方topPlugin DIV中追加HTML
//var topPlugin=' id="addButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addUser" style="display:"&' +
// ' class="glyphicon glyphicon-plus" aria-hidden="true"&&添加用户&';
//删除用户按钮的HTMLDOM
var topPlugin='
class="btn btn-danger btn-sm" id="deleteAll"&批量删除&
class="btn btn-primary btn-sm addBtn" &新 增&
id="exp" style="display:"&&
class="btn btn-info btn-sm" id="expCsv"&导 出全部&
class="btn btn-warning btn-sm" id="reset"&重置搜索条件&' ;
$("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
//$("#expCsv").on("click", exp1);//给下方按钮绑定事件
7：接下来是服务端
我是jfinal+beetSql
每次datatables发送的请求都是start和length两个请求数据，所以以下是我在后台的封装`
import org.beetl.sql.core.engine.PageQ
import java.util.L
*author:zhangweilun
public class DataTables {
private long recordsT
private long recordsF
public DataTables(int draw, PageQuery page,List data) {
this.draw =
this.recordsTotal = page.getTotalRow();
this.recordsFiltered = page.getTotalRow();
this.data =
public long getDraw() {
public void setDraw(long draw) {
this.draw =
public long getRecordsTotal() {
return recordsT
public void setRecordsTotal(long recordsTotal) {
this.recordsTotal = recordsT
public long getRecordsFiltered() {
return recordsF
public void setRecordsFiltered(long recordsFiltered) {
this.recordsFiltered = recordsF
public List&T& getData() {
public void setData(List&T& data) {
this.data =
这是datatables要需要返回的json数据格式 @SuppressWarnings({ “rawtypes”, “unchecked” })
private void renderDataTable(PageQuery page,List data) {
int draw = getParaToInt(“draw”, 0);
renderJson(new DataTables(draw, page,data));
int start = getParaToInt("start",0)+1;
int length = getParaToInt("length",10);
int pageNumber = start/length+1;
PrivilegeS privilegeS = new PrivilegeS();
List&Privilege& privilegeList = privilegeS.dao.all(Privilege.class,start,length);
PageQuery pageQuery = Paginate.paginate(Privilege.class,"1_privilege.allPrivilege",pageNumber,length);
setAttr("pageQuery",pageQuery);
renderDataTable(pageQuery,privilegeList);
以上为控制器逻辑
自行封装请求参数
"type": "POST",
"url":contextPath + "/dept/list.do",
"data":function(d){
d.state=$("#state").val()
d.deptname=$("#deptname").val().trim()
d.startTime=$("#startTime").val()
d.endTime=$("#endTime").val()
ajax片段增加，在搜索按钮上绑定事件
table.ajax.reload();
其中table为
var table = $(‘#example’).DataTable（）；而来
排名：千里之外
（8）（1）（14）（1）（1）（2）（1）（1）（1）（1）（1）（1）（1）（1）（1）（5）（1）（1）（1）（1）（0）datatables搜索框延迟搜索
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay =
function (
oSettings, iDelay ) {
_that = this;
( iDelay === undefined ) {
&&&&&&&&iDelay
&&&&this.each(
function ( i
&&&&&&&&$.fn.dataTableExt.iApiIndex
&&&&&&&&var
&&&&&&&&&&&&$this
&&&&&&&&&&&&oTimerId
&&&&&&&&&&&&sPreviousSearch
&&&&&&&&&&&&anControl
= $( 'input', _that.fnSettings().aanFeatures.f );
&&&&&&&&&&
&&&&&&&&&&&&anControl.unbind(
'keyup' ).bind( 'keyup',
function()
&&&&&&&&&&&&var
&&&&&&&&&&&&if
(sPreviousSearch === null || sPreviousSearch
!= anControl.val()) {
&&&&&&&&&&&&&&&&window.clearTimeout(oTimerId);
&&&&&&&&&&&&&&&&sPreviousSearch
= anControl.val();&
&&&&&&&&&&&&&&&&oTimerId
= window.setTimeout(function()
&&&&&&&&&&&&&&&&&&&&$.fn.dataTableExt.iApiIndex
&&&&&&&&&&&&&&&&&&&&_that.fnFilter(
anControl.val() );
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&}
&&&&&&&&});
&&&&&&&&&&
&&&&&&&&return
&&&&return
调用方法：
$(document).ready(function()
$('.dataTable').dataTable().fnSetFilteringDelay();
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Datatables中文API――基本参数_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Datatables中文API――基本参数
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩5页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢