jquery datatable 通过ajax从后台获取每个分页数据后,搜索框无法搜索问题

当我们通过如下的ajax到后台获取数据

permissionTable = $('#permissionTable').DataTable({
        "ajax": {
            "url": "/user/permission_get",
            "data": function(d) {
                d.type = 'getPermissionTable'
            }
        },})
这个ajax只会返回当前请求页的数据,而不是所有页的数据
这时候会发现,datatable生成的搜索框是无法搜索的,因为只是获取了当前页的数据,其他页的数据是没有的,只有点击分页才会有点击页的数据,导致搜索失败

要解决这个问题,需要从后台中添加搜索操作的判断来响应搜索请求,如下:

request请求处理:

type = request.GET.get('type','')
if type== 'getPermissionTable':
	start =int(request.GET.get('start'))
	length = int(request.GET.get('length'))
	search = (request.GET.get('search[value]'))
	orderable = {
		'1':'permission__name',
		'2':'permission__codename',
		'3':'Type__name'
	}
	###模糊搜索
	qs = Q()
	for index in range(1,4):
		qs = qs | Q(**{orderable[str(index)]+"__icontains":search})
	if search:
		#当有搜索操作时
		return JsonResponse(searchPerAndType(start,length,qs))
	else:
		#当没有搜索操作时
		return JsonResponse(getPerAndType(start,length))
请求搜索函数searchPerAndType:

def searchPerAndType(start,length,qs):
	tableDict = {
		'recordsTotal':perType.objects.all().count(),
		'recordsFiltered':perType.objects.filter(qs).order_by('Type__name').count(),
		'data':[]
	}
	for item in perType.objects.filter(qs).order_by('Type__name')[start:start+length]:
		tableDict['data'].append({'id':item.id,
					 'name':item.permission.name,
					 'url':item.permission.codename,
					 'modalname':item.Type.name,
					 })

	return tableDict
一般的分页数据请求函数getPerAndType:

def searchPerAndType(start,length,qs):
	tableDict = {
		'recordsTotal':perType.objects.all().count(),
		'recordsFiltered':perType.objects.filter(qs).order_by('Type__name').count(),
		'data':[]
	}
	for item in perType.objects.filter(qs).order_by('Type__name')[start:start+length]:
		tableDict['data'].append({'id':item.id,
					 'name':item.permission.name,
					 'url':item.permission.codename,
					 'modalname':item.Type.name,
					 })

	return tableDict

如此如此,就可以搜索了










猜你喜欢

转载自blog.csdn.net/u011085172/article/details/78184079