dataTables快速生产表格

初始化

关于dataTables使用直接查看
官方API

官方给出的方式两种

CDN方式或者下载到本地
可以直接选择CDN快速使用

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

具体的API自己详细查看我说一下API的简单使用

实例操作

页面html部分

<table id="table_id_example" class="display">
                <thead>
                <td width="30">编号</td>
                <td>公司名称</td>
                <td>公司地址</td>
                </thead>
            </table>

页面依赖的自定义JS部分

//国际化汉化操作
var chiness = {
    "processing": "处理中...",
    "lengthMenu": "显示 _MENU_ 项结果",
    "zeroRecords": "没有匹配结果",
    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
    "infoFiltered": "(由 _MAX_ 项结果过滤)",
    "infoPostFix": "",
    "search": "搜索:",
    "searchPlaceholder": "搜索...",
    "url": "",
    "emptyTable": "表中数据为空",
    "loadingRecords": "载入中...",
    "infoThousands": ",",
    "paginate": {
        "first": "首页",
        "previous": "上页",
        "next": "下页",
        "last": "末页"
    },
    "aria": {
        "paginate": {
            "first": "首页",
            "previous": "上页",
            "next": "下页",
            "last": "末页"
        },
        "sortAscending": "以升序排列此列",
        "sortDescending": "以降序排列此列"
    },
    "thousands": "."
}
//测试数据
var data = [
    {"RN":1,"NAME":'公司1',"TYPENAME":"实业公司"},{"RN":2,"NAME":'公司3',"TYPENAME":"实业公司"},
    {"RN":3,"NAME":'公司2',"TYPENAME":"实业公司"},{"RN":4,"NAME":'公司4',"TYPENAME":"实业公司"}
]
$(function () {
	//初始化绑定查询事件
    $('#search_btn').bind('click',findLvbctj);
    //模拟触发点击查询按钮
    $('#search_btn').trigger('click');
    //初始化表格
    $('#table_id_example').DataTable(
        {
            data:data,
            columns:[
                { data: 'RN',width:'6%',title:'编号' },
                { data: 'NAME' ,width:'20%',title:'公司名称'},
                { data: 'TYPENAME',width:'20%',title:'公司地址' }
            ],
            scrollY: 400,
            language: chiness
        }
    );

});

初始化结果

模拟后台请求操作

实际请求初始化是

 $('#table_id_example').DataTable(
        {
            data:[],
            columns:[
               { data: 'RN',width:'6%',title:'编号' },
                { data: 'NAME' ,width:'20%',title:'公司名称'},
                { data: 'TYPENAME',width:'20%',title:'公司地址',
                  render: function (data) {
                  //经常会出现返回数据为空报错提示重新渲染一下
                        if(data){
                            return data
                        }else{
                            return '';
                        }
                    } 
                }
            ],
            scrollY: 400,
            language: chiness
        }
    );
 function findLvbctj() {
    var gsmc = $('#lvgs').val();
    var searchData = JSON.stringify({
       gsmc:gsmc
    });
    // ajax请求后台
    $.ajax({
        url: '/preUserInfo/lygs',
        type : 'POST',
        contentType : 'application/json;charset=utf-8', // 设置请求头信息
        dataType: 'json',
        data : searchData,
        success: function(data) {
        //AJAX后台请求数据不用在初始化表格了重新载入数据否则会报错
            reloadTable(data);
        }
    });
}

function reloadTable(data){
   var myTable = $('#table_id_example').DataTable();
    var currentPage = myTable.page();
    myTable.clear();
    myTable.rows.add(data.lygs);
    myTable.page(currentPage).draw( false );
}

实际查询页面效果