前端：DataTable使用示例

function fixNumber(num, fix) {
    var str = num.toString();
    if (str.length < fix) {
        var prefix = "";
        for (var i = 0; i < fix - str.length; i++) {
            prefix += "0";
        }
        str = prefix + str;
    }
    return str;
}
var dataTable_language = {
    "lengthMenu" : "显示 _MENU_ 条每页",
    "zeroRecords" : "没有找到任何信息！",
    "infoEmpty" : "无数据",
    "emptyTable" : "没有数据找到",
    "info" : "显示第 _START_ 到第 _END_ 条（共 _TOTAL_ 条）",
    "infoFiltered" : "(来自 _MAX_ 条的过滤数据)",
    "infoPostFix" : "",
    "thousands" : ",",
    "loadingRecords" : "载入中...",
    "processing" : "处理中...",
    "search" : "搜索：",
    "paginate" : {
        "first" : "首页",
        "last" : "尾页",
        "next" : "下一页",
        "previous" : "上一页"
    },
    "aria" : {
        "sortAscending" : ": 升序排列",
        "sortDescending" : ": 降序排列"
    }
};

var dataTable_dom = "t<'t-page'p>";

$("#table_comment").DataTable( {
    "language" : dataTable_language,
    "dom" : dataTable_dom,
    "processing" : true,
    "ordering" : false,
    "searching" : false,
    "serverSide" : true,
    "autoWidth" : false,
    "pageLength" : 10,
    "ajax" : {
        "url" : table_comment_url,
        "data" : function(d) {
                d.id = instr_id
            },
        "dataSrc" : "data"
    },
    "columnDefs" : [
        {
            "width" : "500px",
            "targets" : [ 0 ],
            "data" : null,
            "render" : function(data, type, full) {
                var comm_content = data.comm_content;
                var date = new Date(data.comm_time);
                var comm_time = fixNumber(date.getFullYear(), 2)
                        + "-" + fixNumber((date.getMonth() + 1), 2)
                        + "-" + fixNumber(date.getDate(), 2) + " "
                        + fixNumber(date.getHours(), 2) + ":"
                        + fixNumber(date.getMinutes(), 2);
                var text = "";
                text += '<div class="evaluation-content">'
                        + comm_content + '</div>';
                text += '<div class="detail-time">' + comm_time
                        + '</div>';
                return text;
            }
        },
        {
            "targets" : [ 1 ],
            "data" : null,
            "render" : function(data, type, full) {
                var comm_value = data.comm_value;
                var text = '<div class="evaluation-star">';
                for (var i = 0; i < 5; i++) {
                    if (i < comm_value) {
                        text += '<i class="fa fa-star"></i>';
                    } else {
                        text += '<i class="fa fa-star-o"></i>';
                    }
                }
                text += '</div>';
                return text;
            }
        },
        {
            "targets" : [ 2 ],
            "data" : null,
            "render" : function(data, type, full) {
                var text = data.item_title;
                return text;
            }
        },
        {
            "targets" : [ 3 ],
            "data" : null,
            "render" : function(data, type, full) {
                var nick_name = data.nick_name;
                nick_name = nick_name.substr(0, 1) + '***'
                        + nick_name.substr(-1, 1);
                var user_place = data.province + " " + data.city;
    
                var text = '<div class="detail-user">' + nick_name
                        + '</div>';
                text += '<div>' + user_place + '</div>';
                return text;
            }
        }]
});

$("#table_transaction").DataTable( {
    "language" : dataTable_language,
    "dom" : dataTable_dom,
    "processing" : true,
    "ordering" : false,
    "searching" : false,
    "serverSide" : true,
    "autoWidth" : false,
    "pageLength" : 10,
    "ajax" : {
        "url" : table_transaction_url,
        "data" : function(d) {
            d.id = instr_id
        },
        "dataSrc" : "data"
    },
    "columnDefs" : [
        {
            "targets" : [ 0 ],
            "data" : null,
            "render" : function(data, type, full) {
                var nick_name = data.nick_name;
                nick_name = nick_name.substr(0, 1) + '***'
                        + nick_name.substr(-1, 1);
                var text = "";
                text += '<div class="detail-user"><a href="#">';
                text += nick_name;
                text += '</a></div>';
                return text;
            }
        },
        {
            "targets" : [ 1 ],
            "data" : null,
            "render" : function(data, type, full) {
                var item_title = data.item_title;
                var descri = data.descri;

                var text = "";
                text += '<div>' + item_title + '</div>';
                text += '<div>' + descri + '</div>';
                return text;
            }
        },
        {
            "targets" : [ 2 ],
            "data" : null,
            "render" : function(data, type, full) {
                var text = data.qty;
                return text;
            }
        },
        {
            "targets" : [ 3 ],
            "data" : null,
            "render" : function(data, type, full) {
                var date = new Date(data.comp_time);
                var dateT = fixNumber(date.getFullYear(), 2) + "-"
                        + fixNumber((date.getMonth() + 1), 2) + "-"
                        + fixNumber(date.getDate(), 2) + "<br/>"
                        + fixNumber(date.getHours(), 2) + ":"
                        + fixNumber(date.getMinutes(), 2) + ":"
                        + fixNumber(date.getSeconds(), 2);
                var text = "";
                text += '<div class="detail-time">' + dateT
                        + '</div>';
                return text;
            }
        } ]
});