jQuery 仅适用于 DataTable 的第一页
Posted
技术标签:
【中文标题】jQuery 仅适用于 DataTable 的第一页【英文标题】：jQuery only works on first page of DataTable 【发布时间】：2016-12-12 06:24:20 【问题描述】：我有一个 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();
);
());
);
【问题讨论】：
【参考方案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();
)
);
);
【讨论】：
我建议您减少这段代码以获得更好的可读性和性能。 ` $(function () $('#reviewTable').on('draw.dt', function () $('tr:even').css('background-color', '#EBEBEB'); $('tr:odd').css('background-color', '#FFF'); $('.datepicker').datepicker(); ); ); `【参考方案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。
【讨论】：
嘿@Shaunak，谢谢你的回复。我尝试使用 DataTable 的 'page.dt' 事件处理程序，但正如它在文档中所述 - 在重绘表之前触发此事件。所以当我尝试使用：'$('#reviewTable').on('page.dt', function () alert('page changed'); $('tr:even').css('background- color', '#EBEBEB'); $('tr:odd').css('background-color', '#FFF'); $('.datepicker').datepicker(); );'所有这些代码都是在表中的元素甚至可以被正确引用之前完成的。 啊好吧。我刚刚用这种方法更新了我的答案:(.. 然后从那个事件中尝试将datepicker 包装在一个准备好的 dom 中，就像 $(function() $('.datepicker').datepicker(); ) 一样，看看是否有帮助。
像这样？: $('#reviewTable').on('page.dt', function () $(document).ready(function () alert("正在改变... .pages!!!"); $(function () $('tr:even').css('background-color', '#EBEBEB'); $('tr:odd').css('background -color', '#FFF'); $('.datepicker').datepicker(); ) ); );
是的，它有效吗？如果没有，如果您可以创建一个示例 jsFiddle 来演示您的问题，那将非常有帮助。会更容易调试。
还是不行。我在这里创建了一个 JFiddle：jsfiddle.net/4xpwLx5r/1，在那里一切正常。只是在我的实际代码中不起作用:(@Shaunak【参考方案3】：
做 $('body').delegate('btn', 'click', function ()
【讨论】：
欢迎来到 Stack Overflow，感谢您的回答！您的答案可能会受益于您的解决方案如何工作的解释。以上是关于jQuery 仅适用于 DataTable 的第一页的主要内容，如果未能解决你的问题，请参考以下文章