需要在url中配置路由，/work/list/指向到work_list
JS代碼：
$(document).ready(function() {
$("#dataTables-example").dataTable(
{
// 開啟服務(wù)器模式
"serverSide": true,
// 開啟處理功能
"processing" : true,
// 允許排序
"orderable":true,
// 允許查詢
"searching" : true,
// 根據(jù)第四列降序排列
"order": [[ 3, "desc" ]],
// 發(fā)送post請(qǐng)求
"ajax":{
"type": 'POST' ,
"url": '/work/list/'
},
// 返回?cái)?shù)據(jù)
columns: [
{ "data": "name",
// 數(shù)據(jù)渲染尤误，返回超鏈接的字條
"render": function ( data, type, full, meta ) {
return '<a href="/work/work_results?name='+data+'" ><span>'+data+'</span></a>';
}
},
{ "data": "user" },
{ "data": "fun" },
{ "data": "start_time" },
{ "data": "end_time" },
{ "data": "sum_time" },
{ "data": "status",
// 數(shù)據(jù)渲染，判斷返回內(nèi)容岔绸，返回span顏色
"render": function (data, type, full, meta) {
if (data == '執(zhí)行成功') {
return '<span class="label label-success">' + data + '</span>';
}
else if (data == '執(zhí)行失敗') {
return '<span class="label label-danger">' + data + '</span>';
}
else if (data == '執(zhí)行中') {
return '<span class="label label-warning">' + data + '</span>';
}
else {
return '<span class="label label-primary">' + data + '</span>';
}
}}
],
'columnDefs': [{
'targets': 0,
'searchable': true
}]
}
);
});
$("form").submit(function(e){
e.preventDefault();
table = $("#dataTables-example").DataTable();
table.ajax.reload();
});
國(guó)際化
$(function() {
var oLanguage = {
"oAria": {
"sSortAscending": ": 升序排列",
"sSortDescending": ": 降序排列"
},
"oPaginate": {
"sFirst": "首頁(yè)",
"sLast": "末頁(yè)",
"sNext": "下頁(yè)",
"sPrevious": "上頁(yè)"
},
"sEmptyTable": "沒有相關(guān)記錄",
"sInfo": "第 _START_ 到 _END_ 條記錄，共 _TOTAL_ 條",
"sInfoEmpty": "第 0 到 0 條記錄越妈，共 0 條",
"sInfoFiltered": "(從 _MAX_ 條記錄中檢索)",
"sInfoPostFix": "",
"sDecimal": "",
"sThousands": ",",
"sLengthMenu": "每頁(yè)顯示條數(shù): _MENU_",
"sLoadingRecords": "正在載入...",
"sProcessing": "正在載入...",
"sSearch": "",
"sSearchPlaceholder": "",
"sUrl": "",
"sZeroRecords": "沒有相關(guān)記錄"
}
$.fn.dataTable.defaults.oLanguage = oLanguage;
});
table表代碼
<table class="table table-striped table-hover" id="dataTables-example">
<colgroup>
<col style="width:8%">
<col style="width:4%;">
<col style="width:2%;">
<col style="width:6%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
</colgroup>
<thead>
<tr>
<th>作業(yè)名稱</th>
<th>執(zhí)行人</th>
<th>執(zhí)行方式</th>
<th>開始時(shí)間</th>
<th>結(jié)束時(shí)間</th>
<th>總耗時(shí)</th>
<th>作業(yè)狀態(tài)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
后端代碼：
def work_list(request):
from django.db.models import Q
if request.method == "POST":
# 獲取所有數(shù)據(jù)
all_result = running_list.objects.all().order_by("-start_time")
# 數(shù)據(jù)條數(shù)
recordsTotal = all_result.count()
recordsFiltered = recordsTotal
# 第一條數(shù)據(jù)的起始位置
start = int(request.POST['start'])
# 每頁(yè)顯示的長(zhǎng)度泪勒，默認(rèn)為10
length = int(request.POST['length'])
# 計(jì)數(shù)器跌前，確保ajax從服務(wù)器返回是對(duì)應(yīng)的
draw = int(request.POST['draw'])
# 全局收索條件
new_search = request.POST['search[value]']
# 排序列的序號(hào)
new_order= request.POST['order[0][column]']
# 排序列名
by_name = request.POST['columns[{0}][data]'.format(new_order)]
# 排序類型棕兼，升序降序
fun_order = request.POST['order[0][dir]']
# 排序開啟，匹配表格列
if by_name:
if fun_order == "asc":
all_result = all_result.order_by(by_name)
else:
all_result = all_result.order_by("-{0}".format(by_name))
# 模糊查詢抵乓，包含內(nèi)容就查詢
if new_search:
all_result = all_result.filter(Q(user__contains= new_search) | Q(fun__contains=new_search) |
Q(start_time__contains=new_search) | Q(end_time__contains=new_search) |
Q(sum_time__contains=new_search) | Q(status__contains=new_search))
# 獲取首頁(yè)的數(shù)據(jù)
datas = all_result[start:(start+length)]
# 轉(zhuǎn)為字典
resp = [obj.as_dict() for obj in datas]
#返回計(jì)數(shù)伴挚，總條數(shù)，返回?cái)?shù)據(jù)
result = {
'draw': draw,
'recordsTotal': recordsTotal,
'recordsFiltered': recordsFiltered,
'data': resp,
}
return HttpResponse(json.dumps(result), content_type="application/json")
