分页前端代码实现

总共三步：
-----1：css-----
具体css引入代码可以看我另外发布的“js/css 相关引入文件”
<link href="~/media/fenye/page.css" rel="stylesheet" />
<style type="text/css">
    .tdContextClass {
        text-align-last: auto;
        color: #000000;
        text-align: center;
        font-size: 12px;
    }
</style>
-----2：html------
  <div class="portlet-body">
                <table id="tbFoodCheck" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center" width="5%">班级</th>
                            <th class="center" width="6%">姓名</th>
                            <th class="center" width="16%">年龄</th>
                            <th class="center" width="10%">性别</th>
                            <th class="center" width="15%">成绩1</th>
                            <th class="center" width="16%">成绩11</th>
                            <th class="center" width="6%">成绩12</th>
                            <th class="center" width="6%">成绩13</th>
                            <th class="center" width="5%">成绩14</th>
                            <th class="center" width="6%"></th>
                        </tr>
                    </thead>

                    <tbody id="tbody"></tbody>
                    <tr>
                        <td colspan="9">
                            <div style="text-align-last:auto;color:#000000;font-weight:bold;">
                                <ul class="page" maxshowpageitem="10" pagelistcount="@ViewBag.PerPageCount" id="page"></ul>

                            </div>
                        </td>

                    </tr>
                </table>
            </div>
------3：js引入/编写-------------------------
 <link rel="stylesheet" href="~/ace/assets/css/jquery-ui-1.10.3.full.min.css" />
    <script src="~/media/fenye/page.js"></script>

  var GG = {
            "kk": function (pageIndex) {
                $.ajax({
                    url: 'GetThirdFoodCheck',
                    type: 'post',
                    datatype: 'json',
                    data: { 'PerPageCount': PerPageCount, 'PageIndex': pageIndex, 'RegionID': RegionID, 'CheckProjectName': CheckProjectName, 'DateRangePicker': DateRangePicker, 'SampleName': SampleName, 'UserNames': UserNames, 'MarketName': MarketName, 'MarketType': MarketType, 'CheckResult': CheckResult, 'TestingUnitID': TestingUnitID },
                    success: function (json) {
                        $("#tbody").empty();//清空数据区
                        var li = "";
                        var list = json.list;
                        $.each(list, function (index, array) { //遍历json数据列
                            li += "<tr class='odd gradeX '>";

                            li += "<td class='tdContextClass'>" + array.sNames + "</td>";
                            li += "<td class='tdContextClass'>" + array.SampleNo + "</td>";
                            li += "<td class='tdContextClass visible-md visible-lg hidden-sm hidden-xs '>" + array.TestingUnit + "</td>";
                            li += "<td class='tdContextClass visible-md visible-lg hidden-sm hidden-xs '>" + array.lNames + "</td>";
                            li += "<td class='tdContextClass'>" + array.CheckDate + "</td>";
                            li += "<td class='tdContextClass'>" + array.CheckProjectName + "</td>";
                            li += "<td class='tdContextClass'>" + array.CheckResultValue + "</td>";
                            li += "<td class='tdContextClass'>" + array.CheckResult + "</td>";
                            li += "<td class='tdContextClass'>" + array.uNames + "</td>";
                           
                            li += "<td class='tdContextClass'><div class='action-buttons'>";
                            //if (DelRight == "0")
                            //{
                            //    li += "<a class='red' href='javascript:CheckDataDelete(\"" + array.FoodCheckID + "\")' title='删除'>";
                            //    li += "<i class='icon-trash bigger-130'></i>";
                            //    li += "</a>";
                            //}
                            if (array.CheckImgURL != "")
                            {
                                if (array.CheckImgURL.substring(0, 1) == "/")
                                {
                                    li += "<a class='blue' href='javascript:ShowImage(\"" + array.CheckImgURL + "\")' title='显示'>";
                                    li += "<i class='icon-zoom-in bigger-130'></i>";
                                    li += "</a>";
                                }
                            }
                            //li += "<a class='red' href='javascript:Position(\"" + array.FoodCheckID + "\")' title='坐标'>";
                            //li += "<i class='icon-map-marker bigger-130'></i>";
                            //li += "</a>";

                            li += "</td></tr>";
                        });
                        $("#tbody").append(li);//添加到表格中
                    },
                    error: function (reg) {
                        alert(reg)
                    }
                });
            }
        }
        var pagecont = "@ViewBag.pagecount";

        $("#page").initPage(parseInt(pagecont), 1, GG.kk);