js 简单的自制分组(类似于分页) 结合mvc3

cshtml 页面:
 
 
  </div>
     <script type="text/javascript">
     var ParamServerList = [];
     var pageSize = 30;
    </script>
                            <div class="blank10"></div>
                            <div class="server">
 
                                <h3 class="tit7"></h3>
<ul id="txtSPager"  class="LstPager cls" style=" clear:both;"></ul>
                                <ul id="allserver">
@for(var j=0;j<Model.GameServers.Count;j++)
 
{
var item = @Model.GameServers[j];
 
var name = "S_List" + j;
<li id="@name"><a target="_blank" href="http://www.niu99.com/Game/Start/@item.Game.Code/@item.Code">@item.ServerName &nbsp;&nbsp; @item.Game.GameName&nbsp;<span> 火爆开启</span></a>
   <script type="text/javascript">
   ParamServerList.push('@name');
            </script>
 
</li>
  }
                                </ul>
 
                            </div>
                            <div class="blank10"></div>
                            
                        </div>
                       
                    </section>
</div>
<div class="modLeftBottom">
</div>
</div>
 
<script type="text/javascript">
var totalRecords = ParamServerList.length;
var totalPages = Math.ceil(totalRecords / pageSize);
$(function () {
goPager(totalPages - 1);
});
function showPager(num) {
$('#txtSPager').html('');
if (totalRecords > pageSize) {
for (var i = totalPages - 1; i >= 0; i--) {
$('<li class="preserver ' + (i == num ? 'cur' : 'nul') + '" onmouseover="goPager(' + i + ')">' + (1 + (i * pageSize)) + '-' + (i == totalPages - 1 ? totalRecords : (i + 1) * pageSize) + '服' + '</li>').appendTo($('#txtSPager'));
}
}
}
function goPager(num) {
if (num < totalPages) {
var sIndex = num == totalPages - 1 ? 0 : totalRecords - ((num + 1) * pageSize);
var eIndex = totalRecords - (1 + (num * pageSize));
for (var i = 0; i < ParamServerList.length; i++) {
if (i >= sIndex && i <= eIndex) $('#' + ParamServerList[i]).show();
else $('#' + ParamServerList[i]).hide();
}
showPager(num);
}
 
</script>














二:
其实用另外一种方法也可以,是通过slice()也可以的 

<ul id="preserver" style=" height:30px; padding-bottom:20px;">
@{
var total = Model.GameServers.Count / 30;
   var result = Model.GameServers.Count % 30;
if (result > 0)
{
<li ><a onmouseover="$('#allserver li').hide().slice(0, @result).show();" href="javascript:void(0);">@(total * 30 + result)服 - @(total * 30 + 1)服</a></li>
}
for (var i = 0; i < total; i++)
{
var m = (total - i);
var t = (i + 1) * 30 + result;
<li ><a onmouseover="$('#allserver li').hide().slice(@(i*30+result),@t).show();" href="javascript:void(0);">@(m*30)服 - @((m-1)*30+1)服</a></li>
}
 
  }
</ul>
                                <ul id="allserver">
@foreach (var item in Model.GameServers)
{
 
<li><a target="_blank" href="http://www.niu99.com/Game/Start/@item.Game.Code/@item.Code">@item.ServerName &nbsp;&nbsp; @item.Game.GameName&nbsp;<span> 火爆开启</span></a></li>
}

                                </ul> 

posted on 2012-12-05 15:42  douqiumiao  阅读(247)  评论(0编辑  收藏  举报