datatables使用配置

1、下载datatables  js、css

http://datatables.net/releases/DataTables-1.10.15.zip   点击打开链接

2、引入js css

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.js"></script>

3、添加HTML代码

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

4、初始化

$(document).ready( function () {
	    $('#table_id_example').DataTable();
	} );

5、优化样式

js和css改为

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>

6、配置中文

 $('#table_id_example').DataTable({
        	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": ": 以降序排列此列"
                }
            }
        });

7、配置

更多配置  http://datatables.club/reference/option/

名称	说明
jQueryUI 默认(true)	控制是否使用jquerui的样式（需要引入jqueryui的css）
autoWidth默认(true)	控制Datatables是否自适应宽度
info默认(true)	控制是否显示表格左下角的信息
lengthChange默认(true)	是否允许用户改变表格每页显示的记录数
ordering默认(true)	是否允许Datatables开启排序
paging默认(true)	是否开启本地分页
processing默认(false)	是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
scrollX默认(false)	设置水平滚动
scrollYOption	设置垂直滚动
searching默认(true)	是否允许Datatables开启本地搜索
serverSide	是否开启服务器模式
stateSave	保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
deferRender	控制Datatables的延迟渲染，可以提高初始化的速度

8、datatables案例

案例下载 https://download.csdn.net/download/m0_37924754/10530378