无需多言,代码如下,仅供参考:
(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>