dataTables插件使用

引用文件

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>   

实例

//配置表格
var tableLanguage = {
    "sLengthMenu" : "每页显示 _MENU_ 条",
    "sZeroRecords" : "对不起，没有匹配的数据",
    "sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
    "sInfoEmpty" : "没有匹配的数据",
    "sInfoFiltered" : "(数据表中共 _MAX_ 条记录)",
    "sProcessing" : "正在加载中...",
    "sSearch" : "全文搜索：",
    "oPaginate" : {
        "sFirst" : "第一页",
        "sPrevious" : " 上一页 ",
        "sNext" : " 下一页 ",
        "sLast" : " 最后一页 "
    }
}
//表格
$('#example').DataTable({
            "oLanguage" :tableLanguage,
            "processing": true,
            "serverSide": true,               
            "ajax":{
                "url":"",
                "data":_getParam()
            }, 
            "searching": false,
            "ordering":  false,
            "fnRowCallback":function( row, data, displayIndex, displayIndexFull){
                $('td:eq(3)', row).html("<div title="+data.suggest+">"+data.suggest+"</div>");
            },
            "aoColumns" : [
                                {"mData" : "fileName"},//fileName是后台返回的数据字段名
                                {"mData" : "fileSize"},
                                {"mData" : "fileType"},                                   
                                {"mData" : "userName"},
                                {"mData" : "publishTime"}
                            ],
            "dom": 'rt<"page-bottom clearfix"lip>'
        });