jquery dataTable ajax
dataTable 插件的相关api:
http://www.datatables.net/api
最近玩dataTable,ajax,一个sample,留个纪念，备用,下面是对dataTable的初始化,返回结果填充的片段,ajax相关回调和httprequest action等省略...
http://www.datatables.net/api
最近玩dataTable,ajax,一个sample,留个纪念，备用,下面是对dataTable的初始化,返回结果填充的片段,ajax相关回调和httprequest action等省略...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var datatables = null;
var datatables = $('#example').dataTable( {
'bPaginate': true,
"bProcessing": true,
'bLengthChange': true,
'sPaginationType': 'full_numbers',
"sAjaxSource": '../ajax/sources/arrays.txt',
"oLanguage": {
"sProcessing": "正在加载数据...",
'sSearch': '数据筛选:',
"sLengthMenu": "每页显示 _MENU_ 项记录",
"sZeroRecords": "没有符合项件的数据...",
"sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据；总共有 _TOTAL_ 项记录",
"sInfoEmpty": "显示 0 至 0 共 0 项",
"sInfoFiltered": "(_MAX_)"
},
"aoColumns":[
null, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }
]
} );
function updateDataTable() {
datatables.fnClearTable();
datatables.fnAddData([ ".1","2",".3","4","5"] );
datatables.fnAddData([ ".a","b",".c","d","e"] );
}
$("#link").click(function(){
updateDataTable();
});
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<h1><a href="#" id="link">Live example</a></h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
</body>
</html>