具体用法查看官网 https://datatables.net/
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试DataTable插件</title>
{#需要引入js、css文件#}
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function () {
var data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
$('#myTable').DataTable({
/*
"ajax": { //ajax请求
"url": "", // 请求数据url
"type": "POST", // 请求方法
"data": function (d) { // 请求参数
return $.extend(false, {}, d, {})
}
},
*/
"data": data,
"aoColumns": [
{
'sWidth': "20%",
"mDataProp": "name",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
console.log(nTd);
console.log(sData);
console.log(oData);
console.log(iRow);
console.log(iCol);
}
},
{
'sWidth': "20%",
"mDataProp": "position",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
}
},
{
'sWidth': "20%",
"mDataProp": "salary",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
}
},
{
'sWidth': "20%",
"mDataProp": "start_date",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
}
},
{
'sWidth': "10%",
"mDataProp": "office",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
}
},
{
'sWidth': "10%",
"mDataProp": "extn",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
}
},
],
select: {
style: 'multi'
},
fnDrawCallback: function (oSettings) { //ajax回调
{#var json = jQuery.parseJSON(oSettings.jqXHR.responseText);#}
}
});
});
{# 测试$.extend(false, {}, d, {}) #}
$(document).on("click",function () {
var ext = $.extend(true,{"name":"klx"},{"name":{"klx":"klx","hrr":"hrr"}});
console.log(ext);
})
</script>