首先是前端代码吧:
<script src="/static/jquery.min.js" type="text/javascript"></script>
<script src="/static/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/static/jquery.dataTables.min.css" />
<table id="datatable" width="100%" border="1">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Operation</th>
</tr>
<thead>
</table>
js代码如下:
$(document).ready(function() {
$("#datatable").dataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "/ajax_json",
type: "post",
dataType: "json",
},
"columns": [
{"data": "id", "bSortable": false},
{"data": "firstName"},
{"data": "lastName"}
],
"columnDefs": [
{
"targets": [3],
"data": "id",
"render": function(data, type, full) {
return "<a href='/update?id=" + data + "'>Update</a>";
}
}
]
});
});
后端代码如下:
def ajax_json(request):
rsp = {"draw":2,"recordsTotal":11,"recordsFiltered":11,"data":[{"id":1,"firstName":"Troy","lastName":"Young"},{"id":2,"firstName":"Alice","lastName":"LL"},{"id":3,"firstName":"Larry","lastName":"Bird"},]}
return HttpResponse(json.dumps(rsp), content_type="application/json")
一个非常小的demo,先run起来,其它的都是小事。
后续:
接下里是丰满整个流程,前端传给后端的参数很多,但是重要的就那么几个:
draw是请求的序号,start是数据的起始,length是需要返回的最大数据条数。search[value]是查找的值