數據表 - 無法選擇下一頁上的行

我正在製作一個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>

，一切工作正常。我可以選擇行和做東西。但是，當我轉到下一頁的行時，我無法選擇一行。

我用螢火蟲來調試javascript和我已經注意到，它並沒有踏進這個代碼時，我從不同的頁面點擊一行：

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

什麼想法？

來源

2014-02-15 Brian Peach

問題解決了，我正在初始化表格兩次。這最終解決了我的問題。

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

來源

2014-02-15 20:46:57

數據表 - 無法選擇下一頁上的行

回答

相關問題