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的搜索框了