datatables 简单的列表循环

一、引用 jquery.dataTables.min.js

二、实例

$(function(){

    //提示信息
var lang = {
"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": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
//初始化表格
var table = $(".table-sort").dataTable({
destroy: true,
iDisplayLength : 10,//默认每页数量
bLengthChange : false, //改变每页显示数据数量
language:lang, //提示信息
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
bSort: false,//排序功能
order: [ 5, "desc" ], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "full_numbers", //分页样式：simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort'的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.page = (data.start / data.length);//当前页码
//console.log(param);
//ajax请求数据
$.ajax({
type: "post",
url: "接口",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
beforeSend: function(){
      $("#loading").show();
   },
success: function (result) {
setTimeout(function () {
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.data.totalCount;//返回数据全部记录
returnData.recordsFiltered = result.data.totalCount;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.data.iData;//返回的数据列表
for (var i = 0; i < returnData.data.length,i < result.data.iData.length; i++) {
returnData.data[i].createTime = dateFormatUtil(result.data.iData[i].createTime)
}
callback(returnData);
}, 200);
},
complete: function(){
      $("#loading").hide();
   }
});
},
//列表表头字段
columns: [
{ "data": "order_number" },
{ "data": "money" },
{ "data": "number" },
{ "data": "twoCalssname"}, 
{ "data": "takingname" },
{ "data": "user.name" },
{ "data": "beginTime" },
{ "data": "createTime" },
{ "data": "order_status" },
{ "data": "" },
],
columnDefs: [{  
            // 定义操作列  
            "targets": 9,  
            "data": "data",  
            "render": function(data, type, row) { 
                var html = '<span class="do_family" οnclick="orderDetail(\''+row.id+'\')">查看详情</span>' 
                 if(row.status == 0 || row.status == 1 || row.status == 10){
                html += '&nbsp;&nbsp;&nbsp;<span class="do_family" onClick="orderOut(\''+row.id+'\')"  id="'+row.id+'">取消</span>'
                }else if (row.status == 7) {
                html += '&nbsp;&nbsp;&nbsp;<span class="do_family" onClick="agree(\''+row.id+'\')"  id="'+row.id+'">同意</span>'
                html += '&nbsp;&nbsp;&nbsp;<span class="do_family" onClick="unagree(\''+row.id+'\',\''+row.fkUserId+'\')"  id="'+row.id+'">拒绝</span>'
                }
                return html;  


            }  
        }],   
}).api();

})