前端分頁外掛pagination
阿新 • • 發佈:2019-01-27
ajax請求每頁資料,根據返回資料生成頁碼
<link href="~/Scripts/pagination/pagination.css" rel="stylesheet" />
<script src="~/Scripts/pagination/pagination.min.js"></script>
<div id="dataContainer" style="border:1px solid;border-bottom-color:black;"></div>
<div id="demo"></div>
function load_data(type) { $('#demo').pagination({ dataSource: '/project?type=' + type,//介面 引數 prevText: '上一頁', nextText: '下一頁', className: 'paginationjs-theme-red', alias: { pageNumber: 'page', pageSize: 'size' }, pageSize: 5, locator: 'a.data', totalNumberLocator: function (response) {//處理頁數 return response.total; }, ajax: { type: 'POST', beforeSend: function () {//請求前處理 $("#dataContainer").html('載入中...'); } }, callback: function (data, pagination) {//請求後處理 var html = ""; for (var i in data) { var item = data[i]; html += load_html(item); } $("#dataContainer").html(html); } }) } function load_html(item) { return "<div><span>" + item.id + "</span>---<span>" + item.title + "</span>---<span>" + item.synopsis + "</span></div>"; } load_data(0);//首次載入
後臺程式碼:
[HttpPost] public ActionResult index(int page, int type) { var size = 5; var list = project_dal.get_list(page, size, type); var total = project_dal.get_count(type); var model = new result_model() { data = list.ToArray(), total = total, page = page }; return Json(model); } class result_model { public Array data { get; set; } public int page { get; set; } public int total { get; set; } }
裡邊有文件有具體的每個引數和方法的使用