Question

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

这是我的dataTable，其中包含来自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');
            });

任何想法？

Answer 1

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

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

DataTable - 无法在下一页上选择行

1 个答案: