JQuery.datatable —— ajax.reload() 无刷新初始化表格

文章目录

  • JQuery.datatable —— ajax.reload() 无刷新初始化表格
    • 前言
    • 示例
      • 每30秒重新加载表数据(分页重置)
      • 每30秒重新加载表数据(分页留存)
      • 使用回调函数来更新外部元素

JQuery.datatable —— ajax.reload() 无刷新初始化表格

前言

记录一下JQuery.datatable无刷新多种初始化表格的使用方式。
ajax.reload( callback, resetPaging )

参数 描述
callback - function JS 当服务器返回数据并重绘完毕时执行此回调方法,回调方法返回的是服务器返回的数据
resetPaging - boolean JS 重置(默认或者设置为true)或者保持分页信息(设置为false)

示例

每30秒重新加载表数据(分页重置)

var table = $('#example').DataTable( {
	// 后台地址,响应一个json格式数据
	ajax: "data.json"
});

// 设置定时,每30s执行一次
setInterval( function () {
    table.ajax.reload();
}, 30000 );

每30秒重新加载表数据(分页留存)

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
 // 设置定时,每30s执行一次
setInterval( function () {
	// 刷新表格数据,分页信息不会重置
    table.ajax.reload( null, false ); 
}, 30000 );

使用回调函数来更新外部元素

var table = $('#example').DataTable();
 
 // 调用表格ajax行为,获得json并赋值给页面myInput
table.ajax.reload( function ( json ) {
    // 这里的json返回的是服务器的数据
    $('#myInput').val( json.lastInput );
} );

你可能感兴趣的:(技术总结,JavaScript,JQuery,Bootstrap,弗兰克与JavaScript)