jquery - 数据表未显示最后一行

Question

我正在使用jQuery datatables插件显示表格，但是无论我有多少行，都不会显示最后一行。使用"bInfo": true，它在底部显示“显示11个条目中的1到10个”，因此它清楚地知道还有另一行。我尝试启用分页，但是当下一个箭头都亮起并且所有内容都显示时，单击它没有任何作用。

我99％确信问题与最后一行中的项目无关，例如当我添加名称以'Z'开头的新项目时，它变成了丢失的项目（它们在按字母顺序）

这是我的数据表初始化：

dataTable({
            "bPaginate": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDeferRender": true,
            "bSort": true,
            "aoColumnDefs": [
                             { 'bSortable': false, 'aTargets': ["_all"] },
                             { 'sDefaultContent': "N/A", 'aTargets': [0,1,4,5,6,7] },
                             { 'sDefaultContent': 0, 'aTargets': [2,3,8,9,10] }
                         ],
            "bInfo":true,
            "sAjaxSource": Django.url('dash:testsets_header', testSetId),
            "bFilter": false,

            "oLanguage": {
                "sProcessing": '<i class="icon-spinner icon-spin"></i> Loading...',
                "sZeroRecords": "No Test Set loaded."
            },

            "aoColumns": [
             //Various column definitions
            ]
        });

知道为什么最后一行不会显示吗？

Answer 1

由于您不共享自己的代码，并且提到使用eztables，因此我想写一篇关于如何手动集成django和dataTables的快速文章。这还需要做更多的工作，但是我认为灵活性确实会带来回报，让您准确定义要使用的内容和不使用的内容。

全面披露：我讨厌一般观点。作为扩展，我还讨厌eztables和django的所有自动集成工具，这些工具会阻止您实际学习如何自己做某事。那只是我的意见。话虽如此，将django与dataTables集成并不是很复杂。只是dataTables发送一个非常特定的XHR请求，您需要相应地解决它。以下是对here呈现的代码的粗略翻译。另外，自Django 1.5开始，simplejson已被弃用，我将向您展示如何使用json。

就我而言，我创建了一个名为Item的模型，该模型只有两个字段-名称和电子邮件。这只是我很久以前创建的一个虚拟模型，我对该垃圾模型进行了测试。然后，我编写了用于处理数据表的基本代码。请注意，客户端代码在另一视图上（而不是返回dataTables XHR请求的视图）。

这是代码，之后我将讨论关键点。

客户端：

<table id="example" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "/datatables_view/"
  } );
} );
</script>

服务器端：

import json
from cStringIO import StringIO

def datatables_view(request):
    items = Item.objects.all()

    # count total items:
    total = items.count()

    #filter
    search = request.GET['sSearch']
    qs = Q(name__contains=search) | Q(email__contains=search)
    itemes = items.filter(qs)


    # ... etc., all other filtering done here...


    # count items after filtering:
    total_filtered = items.count()


    # slice according to length sent by dataTables:
    start = int(request.GET['iDisplayStart'])
    length = int(request.GET['iDisplayLength'])
    items = items[start:(start+length)]

    response = {
        'aaData': [ [i.name, i.email] 
                        for i in items],
        'iTotalRecords': total,
        'iTotalDisplayRecords': total_filtered,
        'sEcho': request.GET['sEcho']
    }

    s = StringIO()
    json.dump(response, s)
    s.seek(0)
    return HttpResponse(s.read())

这看起来可能令人恐惧，但事实并非如此。让我们分解一下（我只介绍基础知识，您将从这里开始学习）：


如前所述，dataTables发送一个非常特定的XHR请求。因此，我们要做的就是在JSON中返回预期的响应。您可以看到正在发送并期望返回 here的参数的列表。您也可以消耗它们并来回发送自己的东西，但是现在让我们忽略它。
因此，首先，您需要返回json中的数据。我喜欢使用StringIO（或者更快的cStringIO），因为当我最初使用json.dumps时，它发生了各种疯狂的错误，我对此感到恼火。有了StringIO，我再也没有遇到过麻烦，因此这是我的正常做法（尽管显然这不是唯一的方法，甚至可能不是最好的方法）。
始终返回sEcho，这只是dataTables的安全机制
iTotalRecords和iTotalDisplayRecords很不言自明，它们只返回总数和后过滤总数（注意它在切片之前出现）
您可以使用iDisplayStart和iDisplayLength来计算要显示的值
aaData是您要发送的实际数据的二维矩阵。每个列表的长度应与空白填充器td <td colspan="2" class="dataTables_empty">的colspan长度相同。在这种情况下，只需输入姓名和电子邮件地址，但您显然可以随意使用它
sSearch是dataTables顶部的实时搜索输入。您可以使用它来定义过滤方式（我只是将两个字段的 __contains组合在一起，但是您可以扩展它并创建自己的逻辑，这很有用）
上面的示例未显示任何列排序痕迹。我会让你自己弄清楚（不是很复杂，我给了你 here's that link again。继续检查一下，查看发送到服务器的所有参数及其代表的含义）。
请记住，从现在起您将执行任何其他实现，并且您将不会自动运行任何功能。您必须配置的每个功能。


就像我之前说过的那样，这似乎是一项繁重的工作，但事实并非如此，灵活性确实能带来回报。祝好运！希望对您有帮助=]

更新

真正缺少手动集成的一般示例。我花时间在这里写一个django-snippet： https://djangosnippets.org/snippets/3019/。它以非常简化的格式包括dataTables的所有常见实现（包括排序等），包括一些admin样式的预定义（我认为很好）。