bootstrap datatable显示数据表格及因分页获取数据造成的搜索问题

因为在实际中，datatable在展示数据表格时，并不是一下子将所有数据获取，而是只是获取一页的数据，造成datatable的搜索框无法使用，解决方法是在后端中自定义搜索项的数据获取：

1、加载bootstrap 和datatable的css和js，注意jquery.dataTables.min.js要在dataTables.bootstrap.min.js之前引入，不然会有报错

{% block script %}
<script src="/static/assets/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/js/dataTables.bootstrap.min.js"></script>

<script src="/static/assets/js/bootstrap-switch/bootstrap-switch.min.js"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/assets/js/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="/static/assets/js/bootstrap-switch/bootstrap-switch.min.css" rel='stylesheet' type='text/css' />
{% endblock %}2、html表格代码：
<style type="text/css">
.form-control {
background: none !important;
border: 1px solid #ddd !important;
border-radius: 0px !important;
box-shadow: none !important;
}
.dataTables_filter>label{
float:right;
}
</style>
<div class="container-fluid">
<div class="panel panel-default">

<div class="panel-heading">
<h3 class="panel-title">
本地上传
</h3>
</div>
<div class="panel-body">
<table class='table table-striped table-bordered table-hover' id='logTable'>
<thead>
<tr class="headtr">
<th>用户</th>
<th>ip地址</th>
<th>操作</th>
<th>文件名</th>
<th>文件大小</th>
<th>时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>3、使用datatable到后端获取数据并进行展示：
logTable = $('#logTable').DataTable({
"ajax": {
"url": "/log/getLogData",
"data": function (d) {
//d.type = 'getPeriodData'
},
},
"lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
"processing": true,
"serverSide": true,
"columns": [
{
"data": 'username',
},
{'data':'remote_addr'},
{'data':'action'},
{'data':'file'},
{'data':'file_size'},
{'data':'ops_time'},
],
"order": [[5, 'desc']],
"columnDefs": [
{
'targets': 2,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (a, b, c, d){
if (c.action == 0) {
return '上传';
}else{
return '下载';
}
},
},
],

'language': {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},

}) 4、后端处理并返回数据：
分为带有搜索值和不带有搜索值两种情况：

resultData = {
'recordsTotal':0,
'recordsFiltered':0,
'data':[]
}
length = int(request.GET.get('length'))
start = int(request.GET.get('start'))
search = (request.GET.get('search[value]'))
orderable = {
'0':'user',
'1':'remote_addr',
'2':'action',
'3':'file',
'4':'file_size',
'5':'ops_time'
}
###排序
order = orderable[str(request.GET.get('order[0][column]'))]
if request.GET.get('order[0][dir]')== 'desc':
order = '-'+order
###模糊搜索
qs = Q()
for index in range(1,6):
qs = qs | Q(**{orderable[str(index)]+"__icontains":search})
if search:
resultData['data'] = [item.show_table() for item in action_log.objects.filter(qs).order_by(order)[start:start+length]]
resultData['recordsTotal'] = action_log.objects.filter(qs).count()
resultData['recordsFiltered'] = len(resultData['data'])
else:
resultData['data'] = [item.show_table() for item in action_log.objects.all().order_by(order)[start:start+length]]
resultData['recordsTotal'] = action_log.objects.all().count()
resultData['recordsFiltered'] = resultData['recordsTotal']
return JsonResponse(resultData)这样子在完美分页展示表格的同时，还可以使用datatable的搜索框了