控制器代碼
public ActionResult newsData()
{
int pageSize = int.Parse(Request["pageSize"]);
int pageIndex = int.Parse(Request["pageNumber"]);
var list = db.news.OrderBy(p => p.id).Skip((pageIndex - 1) * pageSize).Take(pageSize);
int count = list.Count();
var result = JsonConvert.SerializeObject(new { rows = list, total = count });
return Content(result);
}
視圖層
<link href="https://bbs.csdn.net/topics/~/resouce/bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://bbs.csdn.net/topics/~/resouce/bootstrap-3.3.7/dist/js/jquery-3.3.1.min.js"></script>
<link href="https://bbs.csdn.net/topics/~/resouce/bootstrap_table/bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet" />
<script src="https://bbs.csdn.net/topics/~/resouce/bootstrap_table/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script src="https://bbs.csdn.net/topics/~/resouce/bootstrap_table/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function () {
$("#bt_table").bootstrapTable({
url: "/admin/newsData",
contentType: "application/x-www-form-urlencoded",
pagination: true, //是否分頁
sidePagination: "server", //服務器端分頁
pageNumber: 1,//初始化加載第一頁，默認第一頁
pageSize: 5, //頁面顯示資料條數
pageList: [3, 5, 7, 9], //可供選擇的頁面顯示條數
queryParamsType: "", //設定為 'limit' 則會發送符合 RESTFul 格式的引數。
queryParams: function queryParams(params) {
var pa = {
pageSize: params.pageSize,
pageNumber: params.pageNumber
}
return pa;
},
paginationPreText: "上一頁",
paginationNextText: "下一頁",
columns: [
{
title: 'id',//表的列名
field: 'id',//json資料中rows陣列中的屬性名
align: 'center'//水平居中
}, {
title: '新聞標題',//表的列名
field: 'titleName',//json資料中rows陣列中的屬性名
align: 'center'//水平居中
}, {
title: '新聞內容',//表的列名
field: 'content',//json資料中rows陣列中的屬性名
align: 'center'//水平居中
}]
})
})
</script>
</head>
<body>
<div>
<table id="bt_table"></table>
</div>
</body>
實際頁面效果
就是一直都顯示不了
uj5u.com熱心網友回復：
正好在弄這個 貼上我的代碼 供參考
$('#manage1').bootstrapTable({
//contentType: "application/x-www-form-urlencoded",
//method: "post", //使用get請求到服務器獲取資料
data: result, //獲取資料的Servlet地址
pagination: true,
pageSize: 5,
searchAlign: "right",
buttonsAlign: "left",
searchOnEnterKey: false,
singleSelect: true,
//showColumns: true, //顯示下拉框勾選要顯示的列
//showRefresh: true, //顯示重繪按鈕
// clickToSelect: true,
maintainSelected: false,
search: true,
//striped: true,
//height: 550,
//classes: "table-no-bordered",//設定背景顏色
//queryParams: function (param) {
// return {};
//},
paginationLoop: true,
toolbar: '#toolbar', // 工具列ID
toolbarAlign: 'right', // 工具列對齊方式
//onLoadSuccess: function() { //加載成功時執行
// // alert("加載成功");
//},
//onLoadError: function() { //加載失敗時執行
// // alert("加載資料失敗");
//},
//onCheck: function (row) {
// console.log(row.imgid);
// checkUpdateDate(row.imgid,1);
//},
//onUncheck: function (row) {
// checkUpdateDate(row.imgid,0);
//},
columns: [
{
field: 'id',
align: 'center',
title: '序號',
width: '10',
valign: 'middle',
//sortable: true,
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: '焊接一般口',
align: 'center',
valign: 'middle',
title: '焊接一般口',
formatter: function (value, row, index) {
return row.焊接一般口;
}
}, {
align: 'center',
valign: 'middle',
title: '焊口數量(道)',
width: '100',
formatter: function (value, row, index) {
return str;
}
}, {
align: 'center',
valign: 'middle',
title: '焊接長度(m)',
width: '100',
formatter: function (value, row, index) {
return str;
}
}, {
align: 'center',
valign: 'middle',
title: '天數(實際/有效)',
width: '190',
formatter: function (value, row, index) {
return str;
}
}, {
align: 'center',
title: '工效',
valign: 'middle',
width: '100',
//sortable: true
formatter: function (value, row, index) {
return str;
}
},
{
align: 'center',
title: '焊接進度 ',
valign: 'middle',
width: '220',
formatter: function (value, row, index) {
return str;
}
}
]
});
uj5u.com熱心網友回復：
資料我可以顯示，但是 分頁欄一直都沒有，不知道是不是樣式沖突了uj5u.com熱心網友回復：
代碼正常的，資料總共5條，當然沒有下一頁上一頁了，你把每頁設定成1條，再試，你看是不是正常的uj5u.com熱心網友回復：
樓主 你可以試試把你的總頁數變成大于你的當前分頁數即可顯示右下角比如你每一頁的數量是5個 但是你介面回傳的total是10即可
uj5u.com熱心網友回復：
總共就只有一頁，就沒有上一頁，下一頁了啊
uj5u.com熱心網友回復：
var list = db.news.OrderBy(p => p.id).Skip((pageIndex - 1) * pageSize).Take(pageSize);int count = list.Count();
第一行代碼你針對list取了pageSize條資料，第二行代碼你直接將count置為pageSize（list.Count()）了，這樣的話你從資料庫中取出的資料就只有pageSize條，就只有一頁資料，所以并不會顯示上一頁和下一頁
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
會不會是你后臺傳輸過來的 總記錄條數出錯了？uj5u.com熱心網友回復：
共5條資訊，每頁5條再多加幾條資訊，讓出現“多頁”
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/131119.html
標籤：ASP.NET