基于dataTables无刷新页面重新载入数据
由于需求在dataTables外的一个按钮点击事件,来更改url重新载入数据,通过自己找资料及自己的实现如下:
页面
<table class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th width="20"><input name="id" type="checkbox" value=""></th>
<th width="200">产品名称</th>
<th width="80" align='center' valign='middle'>缩略图</th>
<th>描述</th>
<th width="60">价格</th>
<th width="60">发布状态</th>
<th width="60">操作</th>
</tr>
</thead>
<tbody class="text-c va-m" align="center">
</tbody>
</table>
js代码
var tables;
$(document).ready(function(){
$(function () {
//定义dataTable各参数
var datatables_options = {
//每页加载数量,即rows
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
//默认显示的记录数
"iDisplayLength" : 10,
//控件元素
"sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
// 第一列禁止排序,因为这是复选框,不需要排序
"bSort" : false,
// 是否显示搜索中
"bProcessing" : false,
//当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理
"bServerSide" : true,
//状态信息保存
"bStateSave" : true,
//设为ture时通知dataTable函数完全重新建立一个新的控件实例
"bDestroy" : true,
//延迟加载html元素
"bDeferRender":true,
"paging" : true,
"info" : false,
"bJQueryUI" : false,
"sScrollX" : "100%",
"language" : {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"aoColumnDefs": [
{"orderable":false,"aTargets":[0,6]}// 制定列不参与排序
],
"aoColumns" : [{
"mDataProp" : "id",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "title",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "image",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "sellPoint",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "price",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "status",
"sDefaultContent" : "",
"bVisible" : true
},{
"mDataProp" : "id",
"sDefaultContent" : "",
"bVisible" : true
}],
"fnDrawCallback" : function() {
},
"fnRowCallback" : function(nRow, aData, iDataIndex) {
var id = aData.id;
var name = aData.title;
var image = aData.image;
var price = aData.price;
var discount = aData.discount;
var status = aData.status;
var content ='';
//第一列
$('td:eq(0)', nRow).html("<input type='checkbox' name='ids' id='ids' value='"+id+"'>");
//第二列
if ((name.length) > 6) {
var nname = name.substring(0,28)+"...";
$('td:eq(1)', nRow).html("<span>"+nname+"</span>");
}else{
$('td:eq(1)', nRow).html("<span>"+name+"</span>");
};
//第三列
if ((image.length) > 6) {
var url = image.split(',');
// var imageurl = url[0];
$('td:eq(2)', nRow).html("<a onClick='product_show(\'"+name+"\',\'product-show.html\',\' "+id+" \')' href='javascript:;'><img width='60' class='product-thumb' src='"+url[0]+"'></a>");
}else{
$('td:eq(2)', nRow).html("");
};
$('td:eq(4)', nRow).html("");
if(status=='1'){
content = "<span class='label label-success radius'>已发布</span>";
}
$('td:eq(5)', nRow).html(content);
$('td:eq(6)', nRow).html("<a style='text-decoration:none' onClick='product_stop(this,\" "+id+" \")' href='javascript:;' title='下架'></a>");
},
"sAjaxSource" : "/product/list",
"fnServerData" : function(sSource, data,fnCallback) {
var param = {};
param.rows =data[4].value;//页面显示记录条数,在页面显示每页显示多少项的时候,就是iDisplayLength的值,调试多种方法仍不能获取,只能通过下标方式
param.start = data[3].value;//开始的记录序号
param.page = (param.start / param.rows)+1;//这几个参数主要用于控制翻页操作
$.ajax({
"type" : 'get',
"async":false,
"url" : sSource,
"dataType" : "json",
"data" : param,
"success" : function(result) {
var returnData = {};
returnData.recordsTotal = result.totalCount;//返回数据全部记录
returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能
returnData.data = result.data;//返回的数据列表
//此处后台返回的封装数据不同可作出不同的处理
fnCallback(returnData);//渲染表格数据
}
});
}
};
if (typeof(tables) == "undefined") {
tables = $('.table-sort').dataTable(datatables_options);//初始化
}
});
});
如果是只是删除表格中的数据而无需更改url的重载数据,可使用:
tables.ajax.reload();
更改url的重载数据,此方法主要用于dataTables外的点击事件绑定等操作数据,使用(新URL返回数据格式要与之前的一致):
var settings = tables.fnSettings();
settings.sAjaxSource = "新url";
tables.fnDraw(false);