Question

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

每个日期选择器在创建时都会被赋予类“datepicker”。我使用这个类作为我的jQuery脚本中输入的选择器。下面是我的ASP.NET MVC View页面的代码：

@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

知道了。而不是像使用DataTable的page.dt事件那样调用$（＆＃39; .datepicker＆＃39;）。datepicker（），而是使用等待的事件 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

所以这就是为什么会发生这种情况。您正在应用$('.datepicker').datepicker();功能中的$(document).ready。所以它第一次工作。现在，当您对数据表进行分页时，您应用了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。

jQuery只适用于DataTable的第一页

2 个答案: