jQuery 仅适用于 DataTable 的第一页

Question

我有一个 DataTable 用于显示从 SQL 表加载的信息。在每一行的最后一个单元格中，我有一个 jQuery datepicker 输入。在第一页上，每一行的日期选择器都可以正常工作。以及我的 jQuery 函数，用于在提交之前检查空白字段。问题是在任何其他页面上我都有字段检查器，更重要的是，日期选择器根本不起作用。我查看了https://datatables.net/faqs/index，以了解如何正确初始化我的表，但在尝试给出的示例后仍然没有运气。任何建议都会受到欢迎。

每个日期选择器在创建时都分配有“日期选择器”类。我使用这个类作为我的 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

知道了。当调用 $('.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();
            })
        });
    });

Answer 2

这就是发生这种情况的原因。您正在从 $(document).ready 函数应用 $('.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 3

做 $('body').delegate('btn', 'click', function () {