利用JQuery方便实现基于Ajax的数据查询、排序和分页功能

       之前很少会用JavaScript去实现页功能主要怕麻烦，但了解JQuery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。

       先看下实现功能的脚代码：

/**应用脚本规则：

          引用脚本: JQuery脚本和JQuery的form插件脚本

          Form的ID:    viewform

    显示数据的div的ID: listview

     分页按钮HTML属性: pageindex="1"

     排序按钮HTML属性: orderfield="employeeid desc";

提效排序字段Input的ID,Name: orderfield

提交分页索引Input的ID,Name: pageindex

**/

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();

    }

);

约束规则巧用了html的自定义属性，以上代码描述查询，排序和分页的ajax提交处理。在编写HTML时只需要遵循描述的规则即可，你并不需要在编写任何脚本代码；只需要把脚本添加到页面里：
http://www.linux-cn.com
    <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 id="viewform"  method="post" action="FrmOrderView.aspx">

    <input id="orderfield" name="orderfield" type="hidden" value="" />

    <input id="pageindex" name="pageindex" type="hidden" value ="0"/>