基于MVC框架layui分页控件实现前端分页信息写法

时间:2023-03-09 04:51:37
基于MVC框架layui分页控件实现前端分页信息写法
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak
@{
ViewBag.Title = "JzxyInfoXx";
Layout = "~/Views/Shared/_LayoutIndex.cshtml";
} <script type="text/javascript">
//装变量的容器,可以使用多个分页器哦!
var dataObj = {
page_enterprise: ,
page_order: ,
page_log: ,
page_log_info: ,
limit_enterprise: ,
limit_order: ,
limit_log: ,
limit_log_info:
}
//可以多个分页在同一个页面中,只要给其不同的id容器即可 function GetEnterprise(page) {
var dq = parent.$("#drpDq").val();
ShowDiv();
//初始化的时候直接为1,GetEnterprise(1)(之后数据变更,影响数据结构如:减少或者更改状态等直接直接调取GetEnterprise(dataObj.page_enterprise):刷新当前页数据)
$.post("JzxyInfoXx_Fy", {
dqdm: dq,
pageIndex: page,
pageSize: dataObj.limit_enterprise //可以选择每页显示的数据条数,这个所以就是动态的了
}, function (data) {
var d = eval('(' + data + ')')
var total = d.total;
var html = "<ul class='toubu'><li style='width:10%'>职位简介</li><li style='width:16%'>学员要求</li><li style='width:16%'>辅导安排</li><li style='width:10%'>家教薪资</li>";
html += "<li style='width:10%'>工作地点</li><li style='width:10%'>发布日期</li><li style='width:8%;'>信息费用</li><li style='width:14%;'>预约</li><li style='width:3%;'>详细</li><div class='clearfix'></div>";
html += "</ul>";
if (d.rows.length == ) {
$(".ibox-content").html(html);
HiddenDiv();
return;
} else {
for (i = ; i < d.rows.length; i++) {
var xyinfo = d.rows[i];
var qtqk = xyinfo.fdqtbc + " " + xyinfo.fdqtsc;
qtqk = qtqk.replace(" ", "") == "" ? "无" : qtqk;
var xyyqxx = xyinfo.xyyq;
xyyqxx = xyyqxx.replace(" ", "") == "" ? "无" : xyyqxx;
html += "<ul class='bneir'> ";
html += "<li style='width:10%'>" + xyinfo.fdnjmc + " " + xyinfo.fdkmmc + "</li>";
html += "<li style='width:16%'>" + xyyqxx + "</li>";
html += "<li style='width:16%'>" + xyinfo.fdsjap + "</li>";
html += "<li style='width:10%'>" + xyinfo.fdbcmc + " " + xyinfo.fdqtbc + "</li>";
html += "<li style='width:10%'>" + xyinfo.skqymc + "</li>";
html += "<li style='width:10%'>" + xyinfo.sqsj + "</li>";
html += "<li style='width:8%'>" + xyinfo.xxfy + "元</li>";
if (xyinfo.fpzt == "") {
html += "<li style='width:14%;'><span class='yuyue' onclick='GetYuding(" + xyinfo.id + ")'>预约</span></li>";
} else {
html += "<li style='width:14%;'><span class='yuyue' >已预约</span></li>";
}
html += "<li style='width:5%;'><span onclick='getZk(this)' class='xl'></span></li>";
html += "<div class='clearfix'></div>";
html += "<div class='neir' style='display:none; width:1200px; max-width:1200px; width:100%;'>";
html += "<div class='zznr'>";
html += "【详细内容】辅导年级:" + xyinfo.fdnjmc + " 辅导科目:" + xyinfo.fdkmmc + " 学员要求:" + xyyqxx + "";
html += " 学员介绍:" + xyinfo.xyjj + " 辅导安排:" + xyinfo.fdsjap + " 辅导报酬:" + xyinfo.fdbcmc + " 辅导时长:" + xyinfo.fdscmc + " 辅导其它情况:" + qtqk + "";
html += "</div>";
html += "</div>";
html += "</ul>";
}
$(".ibox-content").html(html);
HiddenDiv();
}
//调用分页
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage,
layer = layui.layer; laypage.render({
elem: 'lodaPage',
count: total,
limit: dataObj.limit_enterprise,
first: '首页',
last: '尾页',
limit: ,
layout: ['prev', 'next'],
curr: dataObj.page_enterprise,
theme: '#00A0E9',
jump: function (obj, first) {
if (!first) {
//***第一次不执行,一定要记住,这个必须有,要不然就是死循环
var curr = obj.curr;
//更改存储变量容器中的数据,是之随之更新数据
dataObj.page_enterprise = obj.curr;
dataObj.limit_enterprise = obj.limit;
//回调该展示数据的方法,数据展示
GetEnterprise(curr)
}
}
});
}); });
} $(function () {
GetEnterprise(dataObj.page_enterprise);
}) </script> <div class="nbannerbox">
<img src="~/Images/image/banner6.png"alt="">
</div>
<!--当前位置-->
<div class="wzbox">
<div class="left"></div>
<div class="mingc">学员信息</div>
<div class="right">当前位置>>学员信息</div>
<div class="clearfix"></div>
</div>
<div class="ibox-content">
</div> <div id="lodaPage" class="lodaPage"></div> <script type="text/javascript"> function getZk(id) {
var classid = $(id).parent().parent().find(".neir");
$(".neir").not(classid).hide();
classid.toggle();
} // $(document).ready(function () {
// $(".xl").click(function () {
// var classid = $(this).parent().parent().find(".neir");
// $(".neir").not(classid).hide();
// classid.toggle();
// });
// }); // $(function () {
// $(".xl").click(function () {
// var classid = $(this).parent().parent().find(".neir");
// $(".neir").not(classid).hide();
// classid.toggle();
// });
// }) </script> <script type="text/javascript"> function GetYuding(id) {
$.ajax({
type: 'post',
url: "JzxyInfoXx_YyddYz",
data: { 'id': id },
cache: false,
success: function (Data) {
if (Data == "dl") {
layer.alert("提示:请先登录后操作!");
return;
} else if (Data == "bsjy") {
layer.alert("提示:您当前账号非教员账号,无法预约学员信息!");
return;
} else if (Data == "jyrz") {
layer.alert("提示:请先进行教员认证,认证成功后才可以预约订单!");
return;
} else if (Data == "ycztwo") {
layer.alert("提示:每天只能预约两次学员信息,您今天已经预约两次学员信息,不可再次预约!");
return;
} else if (Data == "cz") {
layer.alert("提示:您已经预约过该学员信息,不可以重复预约!");
return;
} else if (Data == "ycz") {
layer.alert("提示:已经存在教员预约过该学员信息,不可以预约!");
return;
} var height = (parent.$(window).height()+)+ "px";
var width = (parent.$(window).width()-)+ "px";
parent.layer.open({
type: ,
title: false,
area: [width, height],
skin: 'layui-layer-rim', //加上边框
content: ["@Url.Content("~/Index/JzxyInfoXxSure?id=")"+id],
shadeClose: true,
closeBtn: ,
end: function () {
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.alert("提示:出错" + textStatus + errorThrown);
return;
}
}); }
</script> public ActionResult JzxyInfoXx_Fy(string dqdm, string pageIndex, string pageSize)
{
int Page = ;
int Rows = ;
Page = Convert.ToInt32(pageIndex);
Rows = Convert.ToInt32(pageSize);
int RecorderCount = ;
BLL.jzxyinfo dal = new BLL.jzxyinfo();
DataTable dt = dal.GetJzxyInfoListByPage("", dqdm, "", "", "", "", "", "", "", "", , "desc", "cjsj", Page, Rows, out RecorderCount);
string JsonData = JsonUtility.JsonByPageSize(dt, RecorderCount);
return Content(JsonData);
}