dataTable有两种分页方式: 一种是页面分页(把数据一次性加载到页面，然后再分页)，另一种是服务器端分页. 由于后台数据较多，采用页面分页耗时太长，页面分页还有一个弊端，就是除了第一页，后面的页面中的button都不能用，点击这些button没响应，要重新加载一下页面，button才可以使用，种种弊端，懒得找原因了，就把页面分页换成服务器端分页。

html

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1"><thead><tr><th style=" width:60px;"><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" id="select_all" name="select_all"/><span></span></label></th><th> 组名 </th><th> 成员数目 </th><th> 备注 </th><th> 操作 </th></tr></thead><tbody></tbody></table>

js

var table = $("#sample_1");var table_init = table.DataTable({"bDestroy" : true,"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示"bServerSide" : true, //是否启动服务器端数据导入"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态"aLengthMenu" : [[5, 15, 20, -1], [5, 15, 20, "All"]], //更改显示记录数选项"iDisplayLength" : 5, //默认显示的记录数"bPaginate" : true, //是否显示（应用）分页器"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数"sPaginationType": "bootstrap_full_number","aaSorting" : [[2, "desc"]], //默认的排序方式，第2列，降序排列"bFilter" : true, //是否启动过滤、搜索功能"aoColumns" : [{"sDefaultContent" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"> \<input type="checkbox" class="checkboxes" value="" /> \<span></span> \</label>', //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错"bSortable":false //此列不排序}, {"mData" : "name","sTitle" : "组名","sDefaultContent" : "","bSearchable":true}, {"mData" : "users","sTitle" : "成员数目","sDefaultContent" : ""}, {"mData" : "comment","sTitle" : "备注","sDefaultContent" : ""  ,"bSortable":false   //此列不需要排序},  {"mData" : "","sTitle" : "操作","sDefaultContent" : "","bSortable":false}],"oLanguage": { //国际化配置"sProcessing" : "正在获取数据，请稍后...","sLengthMenu" : "显示 _MENU_ 条","sSearch": "搜索:","sZeroRecords" : "没有您要搜索的内容","sInfo" : "从 _START_ 到  _END_ 条记录 共 _TOTAL_ 条记录","sInfoEmpty" : "记录数为0","sInfoFiltered" : "(共显示 _MAX_ 条数据)","sInfoPostFix" : "","oPaginate": {"sFirst" : "第一页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "最后一页"}},/** 设置操作列的值*/"fnRowCallback" : function(nRow, aData, iDisplayIndex) {op_del = '<a class="del" name=\"/group/del/?id=' + aData.id + '\">删除</a> ';op_edit = '<a href=\"#\" οnclick=\"editGroup('+aData.id+')\">编辑</a>';op_html = '<div class="btn-group"> \<button class="btn btn-xs green dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Actions\<i class="fa fa-angle-down"></i> \</button> \<ul class="dropdown-menu" role="menu"> \<li>' + op_edit + '</li>\<li>' + op_del + '</li>\</ul>\</div>';$('td:eq(4)', nRow).html(op_html);$('td:eq(0) input', nRow).val(aData.id.toString());return nRow;},//服务器端，数据回调处理"fnServerData" : function(sSource, aDataSet, fnCallback) {$.ajax({"dataType" : 'json',"type" : "post","url" : sSource,"data" : aDataSet,"success" : function(resp){fnCallback(resp);}});}});table.find(".group-checkable").change(function() {var e = $(this).attr("data-set"),t = $(this).is(":checked");$(e).each(function() {t ? ($(this).prop("checked", !0), $(this).parents("tr").addClass("active")) : ($(this).prop("checked", !1), $(this).parents("tr").removeClass("active"))})});table.on("change", "tbody tr .checkboxes", function() {$(this).parents("tr").toggleClass("active")});

python代码：

if request.method == 'GET':user_all = User.objects.all()return my_render('userManage/group_list.html', locals(), request)else:page_length = int(request.POST.get('length', '5'))total_length = UserGroup.objects.all().count()keyword = request.POST.get("search")rest = {"iTotalRecords": page_length,   # 本次加载记录数量"iTotalDisplayRecords": total_length,  # 总记录数量"aaData": []}page_start = int(request.POST.get('start', '0'))page_end = page_start + page_lengthpage_data = UserGroup.objects.all()[page_start:page_end]data = []for item in page_data:res = {}res['id'] = item.idres['name'] = item.nameres['users'] = item.user_set.all().count()res['comment'] = item.commentdata.append(res)rest['aaData'] = datareturn HttpResponse(json.dumps(rest), content_type='application/json')

dataTable的排序和搜索功能不能用，需要自己实现。

参考文章：

http://blog.csdn.net/roeny/article/details/19006247

http://692088846.iteye.com/blog/1962970

http://www.cnblogs.com/zhoujie/p/js3.html