jQuery funktioniert nur auf der ersten Seite von DataTable

Question

Ich habe eine DataTable zum Anzeigen von Informationen laden aus einer SQL-Tabelle verwendet. In der letzten Zelle jeder Zeile habe ich eine jQuery-Datepicker-Eingabe. Auf der ersten Seite funktioniert der Datepicker für jede Zeile einwandfrei. Sowie meine jQuery-Funktion, um vor dem Senden nach einem leeren Feld zu suchen. Das Problem ist, dass ich auf jeder anderen Seite den Feldprüfer UND noch wichtiger habe, der Datepicker überhaupt nicht funktioniert. Ich habe auf die https://datatables.net/faqs/index geschaut, um zu sehen, wie ich meinen Tisch richtig initialisiere, aber immer noch kein Glück, nachdem ich das Beispiel versucht habe. Irgendwelche Vorschläge würden appelliert werden.

Jedem Datapicker wird bei der Erstellung die Klasse 'datepicker' zugewiesen. Ich verwende diese Klasse als Selektor für die Eingaben in meinen jQuery-Skripten. Unten ist mein Code für die Seite ASP.NET MVC-Ansicht Ich habe:

@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

Also hier ist, warum dies geschieht. Sie wenden $('.datepicker').datepicker(); von der $(document).ready Funktion an. So funktioniert es zum ersten Mal. Wenn Sie jetzt die Datentabelle paginieren, ist das Dom, auf das Sie den Datepicker angewendet haben, verschwunden! Und Sie werden die Datepicker-Eingabe für neue Doms, die nach der Seitennumerierung eintrafen, nie erneut anwenden.

Um dies zu beheben, müssen Sie in Pagination-Ereignis, und wenn Sie Seite geladen, sollten Sie erneut ausführen $('.datepicker').datepicker();.

Zum Beispiel:

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

Das gleiche gilt für alle anderen Ereignisse, die Sie auf die Datentabelle anwenden. Für Event-Listener können Sie dies beheben, indem Sie die Funktion jquery on für das übergeordnete Element der Eingänge verwenden, und es sollte automatisch erneut angewendet werden.

Zum Beispiel Veranstaltungen zu so etwas wie unten zu ändern sollten Sie Ihre Zuhörer Trennung nach Paginierung Problem beheben:

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

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

Lesen Sie mehr über diesen Ansatz here.

Answer 2

Verstanden. Verwenden Sie anstelle des DataTable-Ereignisses page.dt als Aufruf von $ ('. Datepicker'). Datepicker() das Ereignis draw.dt, das darauf wartet, dass die Tabellenzeilen zuerst geladen werden und dann den korrekten JavaScript-Code ausführen .

wie solche:

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