我正在使用asp.net webforms的jquery .....我正在使用asp.net pagemethods和jquery ....
我在点击锚标签时清空一个div并用新内容填充....当我的新数据被加载到它时,我的div闪烁...如何在jquery中避免这种情况? 我可以使用任何效果....
<script type="text/javascript">
$(document).ready(function() {
getRecordspage(1, 5);
$("a.page-numbers").click(function() {
$("#ResultsDiv").empty();
getRecordspage($(this).text(), 5)
});
});
</script>
和我的页面,
<body>
<form id="form1" runat="server">
<div id="ResultsDiv">
</div>
<div class="pager">
<a ID="lnkbtn0" class="page-numbers" href="javascript:void(0);">1</a>
<a ID="lnkbtn1" class="page-numbers" href="javascript:void(0);">2</a>
<a ID="lnkbtn2" class="page-numbers" href="javascript:void(0);">3</a>
<a ID="lnkbtn3" class="page-numbers" href="javascript:void(0);">4</a>
</div>
</form>
</body>
我的getRecordspage()
功能
function getRecordspage(curPage, pagSize) {
$.ajax({
type: "POST",
url: "Default.aspx/GetRecords",
data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(jsonObj) {
var strarr = jsonObj.d.split('##');
var jsob = jQuery.parseJSON(strarr[0]);
$.each(jsob.Table, function(i, employee) {
$('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv');
});
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
}
});
}
答案 0 :(得分:1)
你应该尝试在循环中首先构建Html ,然后只将它附加到dom一次。这样你就不会为每个员工重新绘制。
修改
我将拥有一个变量,您可以在其中存储为每位员工插入的空白html行
var allEmployees;
var empLine = $('<div class="resultsdiv">
<br />
<span class="resultName"></span>
<span class="resultfields" style="padding-left:100px;">Category :</span>
<span class="resultfieldvalues"></span>
<br />
<br />
<span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues"></span>
<span class="resultfields" style="padding-left:25px;">Salary :</span>
<span class="resultfieldvalues">' + employee.FixedSalary + '</span>
<span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address </span>
<span class="resultfieldvalues"></span>
</div>')
然后,在循环中,使用jquery选择器和函数将员工的所有数据插入此html块的正确位置,然后将此行追加到allEmplyee变量。
在循环之后,您可以将样式添加到这些行(例如偶数行和奇数行),最后,您将注入所有结果的allEMployee变量注入页面。 我认为应该这样做......但我不是jquery大师,只是一个初学者:) 如果这需要一些时间,那么你应该显示一个ajax loader gif,重要的是要表明你的应用正在做某事,或者你的用户会在等待时开始点击。