DataTable - 无法选择下一页上的行答案

【问题标题】：DataTable - can't select rows on next pageDataTable - 无法选择下一页上的行
【发布时间】：2014-02-15 11:42:20
【问题描述】：

我正在制作一个 ASP.NET MVC Web 应用程序，但我遇到了 jQuery 数据表的问题。

这是我的数据表，正在填充来自 ViewBag 的信息（此位工作正常）。

<div>
    <table id="invoiceTable">
        <thead>
            <tr>
                <th>Invoice ID</th>
                <th>Date</th>
                <th>Reciept Date</th>
                <th>Category</th>
                <th>Total Value</th>
                <th>Invoice Ref</th>
                <th>Client</th>
                <th>Status</th>
                <th>Category URL</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            @{
                foreach (CustomInvoice invoice in ViewBag.Invoices)
                {
                    var invoiceAmount = "£" + string.Format("{0:##,##0.00}", invoice.TotalValue);
                    <tr>
                        <td>@invoice.InvoiceId</td>
                        <td>@invoice.Date</td>
                        <td>@invoice.RecpDate</td>
                        <td>@invoice.Category</td>
                        <td>@invoiceAmount</td>
                        <td>@invoice.InvoiceRef</td>
                        <td>@invoice.Client</td>
                        <td>@invoice.Status</td>
                        <td>@invoice.CategoryUrl</td>
                        <td>@invoice.Description</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

这是我正在使用的 javascript：

<script type="text/javascript">
    var oTable;

    $(document).ready(function () {

        // Hide last 2 columns
        $("#invoiceTable").dataTable({
            "aoColumns": [
                null, null, null, null,
                { "sType": "currency" }, null, null, null,
                { "bVisible": false },
                { "bVisible": false } ]
        });

        // Sorts currency in dataTable
        jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "currency-pre": function (a) {
                a = (a === "-") ? 0 : a.replace(/[^\d\-\.]/g, "");
                return parseFloat(a);
            },
            "currency-asc": function (a, b) {
                return a - b;
            },
            "currency-desc": function (a, b) {
                return b - a;
            }
        });

        // Add a click handler to the rows
        $("#invoiceTable tbody tr").click(function () {
            $(this).toggleClass('row_selected');
        });

        // Initialise the table
        oTable = $('#invoiceTable').dataTable();
    });

    // Get the rows which are currently selected
    function fnGetSelected(oTableLocal) {
        return oTableLocal.$('tr.row_selected');
    }
</script>

表格第一页上的所有内容都可以正常工作。我可以选择行并做一些事情。但是，当我转到下一页行时，我无法选择一行。

我使用 firebug 调试 javascript，我注意到当我从不同页面单击一行时，它不会进入此代码：

// Add a click handler to the rows
            $("#invoiceTable tbody tr").click(function () {
                $(this).toggleClass('row_selected');
            });

有什么想法吗？

【问题讨论】：

标签： c# javascript jquery asp.net datatable

【解决方案1】：

问题已解决，我正在初始化表两次。这最终解决了我的问题。

// Initialise the table
        oTable = $("#invoiceTable").dataTable({
            "aoColumns": [
                null, null, null, null,
                { "sType": "currency" }, null, null, null,
                { "bVisible": false },
                { "bVisible": false }]
        });

【讨论】：