jQuery只適用於DataTable的第一頁

Question

我有一個DataTable 用於顯示從SQL表加載信息。在每行的最後一個單元格中，我有一個jQuery datepicker輸入。在第一頁上，每行的日期選擇器工作得很好。以及我的jQuery函數在提交之前檢查空白字段。問題是，在任何其他頁面上，我有字段檢查器，更重要的是，日期選擇器根本不起作用。我查看了https://datatables.net/faqs/index以瞭解如何正確初始化我的表格，但在嘗試給出示例後仍然沒有運氣。任何建議都會被處理。

創建時，每個日期選擇器都被分配了類'datepicker'。我使用這個類作爲我的jQuery腳本中輸入的選擇器。下面是我的ASP.NET MVC視圖頁我有代碼：

@using WebMatrix.Data 
@using System.Data 
@using System.Data.SqlClient 
@using System.Data.OleDb 
@using System.Configuration 
@using System.Web.UI.WebControls 
@using bp_open_issues.Models 
@model bp_open_issues.Models.HomeView 

@{ 
    ViewBag.Title = "BullPen Open Issues - Edit"; 
} 
@{ 
    if (null != TempData["msg"]) 
    { 
     if ("Added" == TempData["msg"]) 
     { 
      <script type="text/javascript"> 
       alert('Record succesfully added.'); 
      </script> 
     } 
     else if ("Updated" == TempData["msg"]) 
     { 
      <script type="text/javascript"> 
       alert('Record closed.'); 
      </script> 
     } 
    } 
    <link rel="stylesheet" type="text/css" href="~/Content/css" /> 
    <script src="~/Scripts/jquery.dataTables.min.js"></script> 
    <section class=" featured"> 
    <div class="content-wrapper"> 
     <h3 style="display: inline">Zone: </h3> 
     @Html.DropDownListFor(m => m.SZView.ZoneSet, Model.SZView.ZoneSet.ToList(), new { id = "zoneSelect" }) 
     <br /><h3 style="display: inline">Station: </h3> 
        @Html.DropDownListFor(m => m.SZView.LineSet, Model.SZView.LineSet.ToList(), new { id = "lineSelect" }) 
     <center><h1 style="display:inline">BULLPEN OPEN ISSUES</h1></center> 
    </div> 
</section> 
} 
<h3>Current Issues:</h3><br /> 
<div class="datagrid"> 
<table id="reviewTable"> 
    <thead> 
     <tr> 
      <th>ZONE<br />area</th> 
      <th>STATION<br />resource</th> 
      <th>WHEN<br />opened</th> 
      <th>WHAT<br />is the concern</th> 
      <th>WHY<br />do we have</th> 
      <th>HOW<br />do we fix</th> 
      <th>WHO<br />is responsible</th> 
      <th>WHEN<br />is it fixed</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr></tr> 
    </tfoot> 
    <tbody> 
     @foreach (Issue issue in Model.IssueSet.IssueList) 
     { 
      <tr class="altsec" id="@issue.RowID"> 
       <td>@issue.Zone.ToString()</td> 
       <td>@issue.Station.ToString()</td> 
       <td>@issue.WhenOpened.Date.ToShortDateString()</td> 
       <td>@issue.What.ToString()</td> 
       <td>@issue.Why.ToString()</td> 
       <td>@issue.How.ToString()</td> 
       <td>@issue.Who.ToString()</td> 
       <td> 
        @using (Html.BeginForm()) 
        { 
         <fieldset><input type="text" style="width: 100px; display: none" value="@issue.ID" name="stringID" /><input class="datepicker" type='text' style="width: 100px" name="stringDate" id="@issue.DateID" /><input class="updateButtons" type="submit" style="float:right; padding: 2px 8px; margin: 1px;color: #ff0000;border: 1px solid #000;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:#000;background-color:#000;" value="Update" /></fieldset> 
        } 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
</div> 
<script> 
$(document).ready(function() { 
    $('#reviewTable').DataTable(); 
    $('tr:even').css('background-color', '#EBEBEB'); 
    $('tr:odd').css('background-color', '#FFF'); 
    $('.datepicker').datepicker(); 
    $('#selectFilter').change(function() { 
     alert('zone was changed.'); 
     $(".all").hide(); 
     $("." + $(this).find(":selected").attr("id")).show(); 
    }); 
    $('#zoneSelect').change(function() { 
     $('#lineSelect').val('ALL'); 
     $(".altsec").hide(); 
     var $this = $(this); 
     var zoneVal = $this.find(":selected").attr("value"); 
     if (zoneVal != "ALL") { 
      $('tr:has(td:contains("' + zoneVal + '"))').each(function() { 
       $(this).show(); 
      }); 
     } 
     else { 
      $(".altsec").show(); 
     } 
    }); 
    $('#lineSelect').change(function() { 
     $('#zoneSelect').val('ALL'); 
     $(".altsec").hide(); 
     var $this = $(this); 
     var lineVal = $this.find(":selected").attr("value"); 
     if (lineVal != "ALL") { 
      $('tr:has(td:contains("' + lineVal + '"))').each(function() { 
       $(this).show(); 
      }); 
     } 
     else { 
      $(".altsec").show(); 
     } 
    }); 
    $(".updateButtons").click(function (event) { 
     var blankField = false; 
     var dateVal = $(this).prev().val(); 
     if (dateVal == 0 || dateVal == null) { 
      event.preventDefault(); 
      alert("Please select a valid date."); 
     } 
    }); 
    (function() { 
     var oldVal; 

     $('#searchBar').on('change textInput input', function() { 
      var val = this.value; 
      if (val !== oldVal) { 
       oldVal = val; 
       if ($('#searchBar').text == "") { 
        $(".altsec").hide(); 
        var zoneVal = $('#zoneSelect option:selected').text(); 
        var lineVal = $('#lineSelect option:selected').text(); 
        if (zoneVal == "ALL" && lineVal == "ALL") { 
         $(".altsec").show(); 
        } 
       } 

      } 
     }); 
    }()); 
}); 

Answer 1

因此，這裏是爲什麼發生這種情況。您正在申請$(document).ready功能中的$('.datepicker').datepicker();。所以它第一次工作。現在，當你分頁時，數據表，你應用datepicker的dom消失了！並且你從來不會在分頁後出現的新dom上重新輸入日期選擇器輸入。

要解決這個問題，您必須掛鉤分頁事件，並且當您加載頁面時，應該重新執行$('.datepicker').datepicker();。

例如：

$('#reviewTable').on('page.dt', function() { 
    $('.datepicker').datepicker(); 
}); 

同樣是對你所申請的數據表中的任何其他事件屬實。對於任何事件監聽器，您可以通過在輸入的父級上使用jquery on函數來解決此問題，並且應該自動重新應用它。

例如改變事件類似下面應該斷開後分頁問題解決您的聽衆：

$("reviewTable").on("#lineSelect","change",function(){ }); 

$("reviewTable").on(".updateButtons","change",function(){ }); 

瞭解更多關於這種方法here。

Answer 2

明白了。在調用$（'。datepicker'）。datepicker（）時，不要使用DataTable的page.dt事件，而是使用事件draw.dt，它將等待錶行首先被加載，然後執行正確的Javascript代碼。

像這樣：

$('#reviewTable').on('draw.dt', function() { 
     $('#reviewTable').ready(function() { 
      $(function() { 
       $('tr:even').css('background-color', '#EBEBEB'); 
       $('tr:odd').css('background-color', '#FFF'); 
       $('.datepicker').datepicker(); 
      }) 
     }); 
    });