星五博客

DataTables使用演示

无需多言,代码如下,仅供参考:
(1.本地化语言提示;2.排序支持;3.搜索支持;4.数据动态分页获取。)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables演示</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
    //"searching": false,
    "processing": true,
    "serverSide": true,
    "ajax": 'DataTablesDemoData.api',
    "language": {
    "lengthMenu": "每页显示 _MENU_ 条记录",
    "zeroRecords": "无可用数据",
    "info": "第 _PAGE_ / _PAGES_ 页",
    "infoEmpty": "无可用数据",
    "infoFiltered": "(筛选于 _MAX_ 条记录)",
    "loadingRecords": "加载中...",
    "processing":     "处理中...",
    "search":         "搜索:",
    "paginate": {
    "first":      "首页",
    "last":       "尾页",
    "next":       "下一页",
    "previous":   "上一页"
    },
    },
    "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>点我!</button>"
        } ]
	} );

	$('#example tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert("序号:"+ data[ 0 ]+"\n标识:"+ data[ 1 ]+"\n版本:"+ data[ 2 ] );
    } );
} );
</script>
</head>
<body class="wide comments example">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>序号</th>
                <th>标识</th>
                <th>版本</th>
                <th>操作</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>序号</th>
                <th>标识</th>
                <th>版本</th>
                <th>操作</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>