jQuery数据表分页
Posted
技术标签:
【中文标题】jQuery数据表分页【英文标题】：Jquery datatable pagination 【发布时间】：2011-04-04 02:17:19 【问题描述】：在下面的代码中，html加载并将调用group_map set python函数。我的问题是系统中启用了分页，所以如果第3页中的用户删除了一个条目，页面将重新加载并返回到第1页.如何让用户在删除条目后停留在同一页面
使用的数据表来自http://www.datatables.net/
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/datatable.css" />
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
</head>
<script>
var oTable;
function fnFormatDetails ( nTr )
var iIndex = oTable.fnGetPosition( nTr ) ;
var aData = oTable.fnSettings().aoData[iIndex]._aData;
var sOut = aData[6];
return sOut;
$(document).ready(function()
$.ajaxSetup( cache: false );
oTable = $('#s_group_table').dataTable(
"aoColumns": [
"sWidth": "30%" ,
"sWidth": "20%" ,
"bSortable": false,"sWidth": "5%" ,
"bSortable": false,"sWidth": "5%" ,
],
"aaSorting": [[0, 'desc']],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/repo/group_set/",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bFilter": false,
"oLanguage" : "sZeroRecords": "No data found", "sProcessing" : "Fetching Data"
);
);
function delete_set(id)
$.post("/repo/group_set_delete/" + id) ;
oTable.fnDraw(true) ;
location.reload();
</script>
<div id="s_group_table">
<table cellpadding="0" cellspacing="0" border="0" >
<thead>
<tr>
<th >Name</th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="dataTables_empty">No data found</td>
</tr>
</tbody>
</table>
</div>
def group_set(request):
try:
response_dict =
offset = int(request.GET.get('iDisplayStart'))
limit = int(request.GET.get('iDisplayLength')) + offset
echo = request.GET.get('sEcho')
sort_cols = int(request.GET.get('iSortingCols'))
for i in range(0, sort_cols):
dir = request.GET.get('iSortDir_' + str(i))
if dir == "asc":
dir = ""
else:
dir = "-"
order_by = dir + group_map (request.GET.get('iSortCol_' + str(i))) + ","
order_by = order_by.strip(',')
total = GroupSet.objects.filter(pk=request.profile.my_id).count()
if limit > total:
limit = total
if order_by == "":
groupset = GroupSet.objects.filter(pk=request.profile.my_id)[offset:limit]
else:
groupset = GroupSet.objects.filter(pk=request.profile.my_id).order_by(order_by)[offset:limit]
p_array = []
p_array_o = []
for q in studentprofilegroup_map:
delete_l = "<a><img title='Delete group' class=center src=\"/repo/images//del.gif\" onclick=javascript:delete_set(\"%d\")></a> " % (q.id)
emp_name = q.first_name + q.last_name
p_array_o = [emp_name , delete_l ]
p_array.append(p_array_o)
response_dict.update('sEcho': echo, 'iTotalRecords': total, 'iTotalDisplayRecords': total, 'aaData': p_array) ;
return HttpResponse(simplejson.dumps(response_dict), mimetype='application/javascript')
except:
print "No records found"
删除函数为as
def group_set_delete(request,gid):
try:
s_gp = GroupSet.objects.filter(pk=gid)
s_gp.delete()
except:
print "could not be deleted"
【问题讨论】：
【参考方案1】：如果您使用 ajax 发布，则使用 location.reload() 更新整个页面是没有意义的 - 这会将数据表带到其默认状态，即第 1 页。
This example shows a datatable with a delete option ，只从网格中删除一行，而不重新加载页面。您所要做的就是将您的调用添加到服务器，所以它会是这样的：
/* Add a click handler for the delete row */
$('#delete').click( function()
$.post("/repo/group_set_delete/", id, function()
/* Remove the row from the grid after server response */
var anSelected = fnGetSelected( oTable );
oTable.fnDeleteRow( anSelected[0] );
);
);
【讨论】：
【参考方案2】：我以不同的方式遇到了同样的问题。在我更新了 3. 页中的行后，表格过去自动返回到 1. 页.. fnUpdate 的第四个参数采用 true/false 来更新表，默认值为 true。我将其更改为 false 然后它开始工作。与您遇到的情况不完全相同，但可能有助于解决您的问题。查看您在代码中使用的函数的参数。问候。奥兹勒姆。
$('#rulesTable').dataTable().fnUpdate(suburb_name, rowNo, 3, false );
【讨论】：
【参考方案3】：location.reload(); 是做什么的？检查它是否使用正确的page 查询参数（即/app/group_set/?page=3）向group_set 对应的URL 发送请求。如果没有，那么您可能需要显式构造 URL 并调用它。
【讨论】：
不是发送页码，如何获取当前页码？以上是关于jQuery数据表分页的主要内容，如果未能解决你的问题，请参考以下文章