This project is read-only.
1
Vote

兄才,AJAX生成的分页太大,我想可以这样解决

description

AJAX分页生成的代码如下:
<div><a disabled="disabled">首页</a>&nbsp;&nbsp;<a disabled="disabled">上一页</a>&nbsp;&nbsp;1&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/2" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">2</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/3" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">3</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/4" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">4</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/5" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">5</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/6" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">6</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/7" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">7</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/8" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">8</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/9" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">9</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/10" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">10</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/11" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">...</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/2" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">下一页</a>&nbsp;&nbsp;<a href="/Controls/MvcPager/AjaxDemo/16" onclick="$.post($(this).attr('href'), function(data) {$('#orderdiv').html(data);});return false;">尾页</a></div> 如果,我们这样子写:
<!--ASP.NET MvcPager 1.4 for ASP.NET MVC 2.0 版权所有:陕西省吴起县博杨计算机有限公司 (http://www.webdiyer.com)--> <div class="pager"><a href='/Region/Index/1'>首页</a>&nbsp;&nbsp;<a href='/Region/Index/7'>上一页</a>&nbsp;&nbsp;<a href='/Region/Index/2'>...</a>&nbsp;&nbsp;<a href='/Region/Index/3'>3</a>&nbsp;&nbsp;<a href='/Region/Index/4'>4</a>&nbsp;&nbsp;<a href='/Region/Index/5'>5</a>&nbsp;&nbsp;<a href='/Region/Index/6'>6</a>&nbsp;&nbsp;<a href='/Region/Index/7'>7</a>&nbsp;&nbsp;<span class="cpb">8</span>&nbsp;&nbsp;<a href='/Region/Index/9'>9</a>&nbsp;&nbsp;<a href='/Region/Index/10'>10</a>&nbsp;&nbsp;<a href='/Region/Index/11'>11</a>&nbsp;&nbsp;<a href='/Region/Index/12'>12</a>&nbsp;&nbsp;<a href='/Region/Index/13'>...</a>&nbsp;&nbsp;<a href='/Region/Index/9'>下一页</a>&nbsp;&nbsp;<a href='/Region/Index/192'>尾页</a></div> <!--ASP.NET MvcPager 1.4 for ASP.NET MVC 2.0 版权所有:陕西省吴起县博杨计算机有限公司 (http://www.webdiyer.com)-->
<script type="text/javascript">
$(".pager a").click(
    function()
    {
        $.post($(this).attr('href'), function(data) {$('#Data').html(data);});return false; 
    }
);
</script>

生成的代码会小很多

还有,最好在ajax分页时,不需要把pager放在ascx中,而最好将它放在aspx中,用js自动去设置当前页与分页控件的html效果。

comments

Webdiyer wrote Sep 23, 2010 at 7:57 AM

谢谢提出反馈意见,这个办法一开始也想过,但存在一个很严重的问题,就是如果页面上其它元素也用了这个CSS样式类,那就会导致这些元素中的超链接出现异常,因为无法保证或限制页面上其它元素也使用相同的CSS类。谢谢!

leehom0123 wrote Sep 23, 2010 at 2:55 PM

感觉通过唯一的ID来标识不错,$("#pager a")这样应该就没问题了~

Webdiyer wrote Sep 28, 2010 at 10:33 AM

默认的情况下没有ID,而且也不需要ID,所以用ID来标识的办法也是不行的。