[MVC4] JQuery分頁

  • 21037
  • 0
  • 2013-10-23

...

 

 

Model


using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using Quanta.PaaS.Module;
using Quanta.PaaS.Module.Database;

namespace Paperless.Models
{
    public class Lot
    {
        public List LotData { get; set; }

        public Lot()
        {

        }

        public DataTable accLot(string app, string xml)
        {
            var sqlModule = AppContext.Current.GetModule();
            var ds = sqlModule.ExecuteDataSet("Paperless", "EXEC [accLot] @app, @xml",
                new SqlParam { Name = "app", DbType = DbType.String, Value = app },
                new SqlParam { Name = "xml", DbType = DbType.String, Value = xml });
            return ds.Tables[0];
        }
    }

    #region Class

    public class LotData
    {
        public string result;
        public string cid;
        public string id;
        public string lotno;
        public string itemnumber;
        public string mafname;
        public string descr;
        public string vendorname;
        public string qty;
        public string po;
        public string plant;
        public string location;
        public string grdate;
        public string grtime;
        public string uid;
        public string msg;
    }

    #endregion
}

 

Controller


using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Paperless.Models;
using Quanta.PaaS.Web.Security;

namespace Paperless.Controllers
{
    public class LotController : Controller
    {
        //
        // GET: /Lot/

        public ActionResult Index()
        {
            Lot l = new Lot();
            PaaSProfile profile = System.Web.HttpContext.Current.Profile as PaaSProfile;   
            string xml = "" + profile.UserDetail.CompanyId + "";
            DataTable dtLotData = l.accLot("getUnassignedLotData", xml);
            l.LotData = (from r in dtLotData.AsEnumerable()
                         select new LotData()
                         {
                             cid = r.Field("cid"),
                             id = r.Field("id"),
                             lotno = r.Field("lotno"),
                             itemnumber = r.Field("itemnumber"),
                             mafname = r.Field("mafname"),
                             descr = r.Field("descr"),
                             vendorname = r.Field("vendorname"),
                             qty = r.Field("qty"),
                             po = r.Field("po"),
                             plant = r.Field("plant"),
                             location = r.Field("location"),
                             grdate = r.Field("grdate"),
                             grtime = r.Field("grtime"),
                             uid = r.Field("uid"),
                         }).ToList();
            return View(l);
        }

    }
}

 

View


@model Paperless.Models.Lot
@{
    ViewBag.Title = "Index";
}

<table id="LotData" class="border">
    @if (Model.LotData != null)
    {
        <thead>
            <tr>
                <th class="border">Lot#</th>
                <th class="border">Item#</th>
                <th class="border">Manufacturer</th>
                <th class="border">Description</th>
                <th class="border">Vendor</th>
                <th class="border">Qty</th>
                <th class="border">PO#</th>
                <th class="border">Plant</th>
                <th class="border">Location</th>
                <th class="border">GRDate</th>
                <th class="border">GRTime</th>
            </tr>
        </thead>       
        foreach (var item in Model.LotData)
        {       
        <tbody>
            <tr id="@item.lotno">
                <td class="border">@Html.DisplayFor(modelItem => item.lotno)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.itemnumber)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.mafname)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.descr)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.vendorname)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.qty)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.po)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.plant)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.location)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.grdate)</td>
                <td class="border">@Html.DisplayFor(modelItem => item.grtime)</td>
            </tr>
        </tbody>
        }
        <tfoot>
        </tfoot>
    }
</table>

@Html.Hidden("PageSize", 10)
@Html.Hidden("CurrentPage")
@Html.Hidden("TotalPage")

<script>
    $(function () {
        getTotalPage();
        showPage(1);
    });

    function getTotalPage() {
        var $pageSize = parseInt($('#PageSize').val());
        $('#TotalPage').val(Math.ceil($("#LotData tbody tr").size() / $pageSize));
    }

    function prevPage() {
        var $currentPage = parseInt($('#CurrentPage').val());
        if ($currentPage > 1) {
            showPage($currentPage - 1);
        }
    }

    function nextPage() {
        var $currentPage = parseInt($('#CurrentPage').val());
        var $totalPage = parseInt($('#TotalPage').val());
        if ($currentPage < $totalPage) {
            showPage($currentPage + 1);
        }
    }

    function showPage($page) {
        var $pageSize = parseInt($('#PageSize').val());
        $('#CurrentPage').val($page);
        $('#LotData tbody tr').each(function ($index) {
            if (($index >= ($page - 1) * $pageSize) && ($index <= $page * $pageSize - 1)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        getPageFooter();
    }

    function getPageFooter() {
        var $currentPage = parseInt($('#CurrentPage').val());
        var $totalPage = parseInt($('#TotalPage').val());
        $('#LotData tfoot').remove();
        $('#LotData').append($('<tfoot>')
            .append($('<tr>')
            .append($('<td>').attr({ colspan: '11', align: 'center' })
            .append('<a href="javascript:showPage(1);"><<</a> ')
            .append('<a href="javascript:prevPage();"><</a> ')
            .append(' ' + $currentPage + '/' + $totalPage + ' ')
            .append('<a href="javascript:nextPage();">></a> ')
            .append('<a href="javascript:showPage(' + $totalPage + ');">>></a> ')
            )));
    }

</script>

CSS

table.border, th.border, td.border{
	border-collapse:collapse;
	border: 1px solid black;
}
th.right {
	text-align:right;
}