Jquery数据表分页

时间:2010-08-26 05:50:05

标签: jquery django jquery-ui jquery-plugins django-views

在下面的代码中,html加载并将调用group_map set python function。我的问题是系统中启用了分页,因此如果页面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"  width="100%">
                    <thead>
                       <tr>
                          <th width="30%">Name</th>
                          <th width="30%"></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>&nbsp;" % (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"

删除功能为

   def group_set_delete(request,gid):
    try:
      s_gp = GroupSet.objects.filter(pk=gid)
      s_gp.delete()
    except:
      print "could not be deleted"

3 个答案:

答案 0 :(得分:0)

我以不同的方式遇到了同样的问题。在我更新3.页面中的行之后,该表用于自动返回1.页面.fnUpdate的第四个参数采用true / false来更新表和默认值为true。我将其更改为false然后它已开始工作。您遇到的情况并不完全相同,但可能有助于解决您的问题。看看你在code.Regards中使用的函数的参数。 Ozlem。

$('#rulesTable').dataTable().fnUpdate(suburb_name, rowNo, 3, false );

答案 1 :(得分:0)

如果您使用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 :(得分:-1)

location.reload();做什么?检查它是否使用正确的group_set查询参数(即page)向与/app/group_set/?page=3对应的网址发送请求。如果没有,那么您可能希望显式构造URL并调用它。