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 @item.Game.GameName <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 @item.Game.GameName <span> 火爆开启</span></a></li>
}
</ul>