JQuery 输入下拉框插件后台分页

                      基于Jquery的输入下拉框插件：FlexBox插件

一   下载地址

       http://www.fairwaytech.com/flexbox 可以下载例子和相关文档，总共有十个示例代码供大家参考。

 

二   引入相关文件

   

<link rel="stylesheet" type="text/css" href="<%=path%>/css/jquery.flexbox.css" /> 

<script type='text/javascript' src='<%=path%>/js/jquery1.4.2-min.js'></script> 

<script type="text/javascript" src="<%=path%>/js/jquery.flexbox.js"></script> 

 

三    相关JavaScript代码

   

   

<script type="text/javascript">
 $(document).ready(function (){ $("#ffb1").flexbox ('queryCombox.action',
{
   resultTemplate:'<div class="col1">{name}</div>', 
    paging: { 
                   style: 'input', 
                   cssClass: 'paging',
                   pageSize: 6,                   
                   showSummary: true, 
                   summaryClass: 'summary', 
                   maxPageLinks: 5,  
                  summaryTemplate: 'Displaying {start}-{end} of {total} results'   

 } 
}); 
}); 

</script>

  

 

 

 

 {name}在JSON的键名字

{"total":18,"results":[{"id":"1001","name":"wangwu"},{"id":"1002","name":"wangliu"},{"id":"1003","name":"wangqi"},{"id":"2001","name":"王海"},{"id":"2002","name":"王成凯"},{"id":"2003","name":"王雨"},{"id":"2004","name":"王蒙"},{"id":"2005","name":"王依"},{"id":"2006","name":"王静"},{"id":"2007","name":"王酷"},{"id":"2008","name":"王过洋"},{"id":"2009","name":"王金龙"},{"id":"2010","name":"王浩"},{"id":"2011","name":"王海"},{"id":"2012","name":"陈浩"},{"id":"2013","name":"陈成"},{"id":"2014","name":"陈五"},{"id":"2015","name":"陈六"}]}

 

 

四   后台分页需要的参数

     

      FlexBox默认的Ajax提交方式Get，可以在FirBug可以看到请求传递的参数，

S代表分页大小，P代表当前页数

 

五   效果图