Home>

I rarely used javascript to implement page functions before, mainly because I was afraid of trouble.But this idea has changed after understanding jquery;With such a script component, it can be easily isolated from html when writing scripts,This makes it easier to write highly reusable scripts.The following is a reuse script that introduces ajax-based data query, sorting, and paging functions written in the process of learning jquery.As long as you follow some script description rules to introduce html and introduce script files, you can easily implement the functions described above.

First look at the code to implement the function:

/** Apply script rules:
Reference script:jquery script and jquery form plugin script
form id:viewform
Id of the div displaying the data:listview
Pagination button html attribute:pageindex="1"
Sort button html attributes:orderfield="employeeid desc";
Id, name:orderfield
Submit id, name:pageindex of pagination index input
** /
function oninitpaging ()
{
$("#listview"). find ("[@ orderfield]"). each (function (i)
{
var ordervalue=$(this) .attr ("orderfield");
$(this) .click (function ()
{
$("#orderfield"). val (ordervalue);
onsubmitpage ();
}
);
}
);
$("#listview"). find ("[@ pageindex]"). each (function (i)
{
var pivalue=$(this) .attr ("pageindex");
$(this) .click (function ()
{
$("#pageindex"). val (pivalue);
onsubmitpage ();
}
);
}
);
}
function onsubmitpage ()
{
var options={
success:function submitsuccess (data) {
$("#listview"). html (data);
oninitpaging ();
}
};
$("#viewform"). ajaxsubmit (options);
}
$(document) .ready (
function ()
{
$("#search"). click (function () {
$("#pageindex"). val ("0");
onsubmitpage ()
});
onsubmitpage ();
}
);

Constraint rules make use of custom attributes of html,The above code describes the query,Sorting and pagination of ajax commit processing.You only need to follow the described rules when writing html,You don't need to write any script code;Just add the script to the page:

<script src=jquery-latest.js></script>
<script src=form.js></script>
<script src=calendar.js></script>
<script src=calendar-setup.js></script>
<script src="lang/calendar-en.js"></script>
<script src=pagination.js></script>
<form method="post" action="frmorderview.aspx">
<input name="orderfield" type="hidden" value="" />
<input name="pageindex" type="hidden" value="0" />
<table border="0" cellpadding="0" cellspacing="0"&​​gt;
<tr>
<td valign="top" align="left">
<table width="550" cellpadding="0" cellspacing="0"&​​gt;
<tr>
<td>
companyname</td>
<td>
<input name="companyname" type="text" /></td>
<td>
shipcity</td>
<td>
<input name="shipcity" type="text" /></td>
</tr>
<tr>
<td>
orderdate</td>
<td align="left">
<input name="orderdate_begin" type="text" />
<input datefield="text3" type="button" value="..." /></td>
<td>
</td>
<td align="left">
<input type="text" name="orderdate_end" />
<input datefield="text4" type="button" value="..." /></td>
</tr>
<tr>
<td align="left" colspan="4">
<input type="button" value="search" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="99%">
<div></div>
</td>
</tr>
</table>
</form>
  • Previous linux shell view current external network IP
  • Next Android implements method to add shortcut to Launcher