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>