MVC+EasyUI+三层新闻网站建立分页查询数据功能（七）

程序员文章站 2022-06-03 14:58:25

mvc新闻网站建立，完成分页查询数据功能。 1、在model里面建立newinfo（里面存放的是新闻信息的实体信息）然后在dal层中建立newinfodal （里...

mvc新闻网站建立，完成分页查询数据功能。

1、在model里面建立newinfo（里面存放的是新闻信息的实体信息）

然后在dal层中建立newinfodal （里面存放对新闻信息的操作）

写入分页查询的代码

/// <summary>
 /// 分页查询
 /// </summary>
 /// <param name="start">分页开始条数</param>
 /// <param name="end">分页结束条数</param>
 /// <returns>返回查询到的list集合</returns>
 public list<newinfo> getpageentitylist(int start,int end)
 {
 string sql = "select * from(select row_number()over(order by id)as num,*from t_news)as t where t.num>=@start and t.num<=@end";
 sqlparameter[] pms = { 
   new sqlparameter("@start",sqldbtype.int),
   new sqlparameter("@end",sqldbtype.int),
   };
 pms[0].value = start;
 pms[1].value = end;
 datatable dt = sqlhelper.excutedatatable(sql,commandtype.text,pms);
 list<newinfo> newlist = null;
 if (dt.rows.count>0)
 {
 newlist = new list<newinfo>();
 newinfo newinfo = null;
 foreach (datarow item in dt.rows)
 {
  newinfo = new newinfo();
  loadentity(item,newinfo);
  newlist.add(newinfo);
 }
 }
 return newlist;
 }
 /// <summary>
 /// 查询出页面条数
 /// </summary>
 /// <returns></returns>
 public int getrecordcount()
 {
 string sql = "select count(*) from t_news";
 int count = convert.toint32(sqlhelper.executescalar(sql,commandtype.text));
 return count;
 }

在bll层中建立newinfoservices（里面存放对新闻信息的逻辑处理）

 dal.newinfodal newinfodal = new dal.newinfodal();
 /// <summary>
 /// 分页查询数据
 /// </summary>
 /// <param name="pageindex">当前页码值</param>
 /// <param name="pagesize">一个多少条数据</param>
 /// <returns></returns>
 public list<newinfo> getpageentitylist(int pageindex, int pagesize)
 {
 int start = (pageindex - 1) * pagesize + 1;
 int end = pagesize * pageindex;
 return newinfodal.getpageentitylist(start,end);
 }
 /// <summary>
 /// 查询出页面的记录数
 /// </summary>
 /// <returns></returns>
 public int getrecordcount()
 {
 return newinfodal.getrecordcount();
 }

我们把新闻管理的url指定为/newinfo/index

MVC+EasyUI+三层新闻网站建立分页查询数据功能（七）

那么就要新建newinfo控制器 index视图就是新闻管理页面的主页了。

新闻管理主页的布局很简单就是一个表格，所以就先在body里面写了一表格

<body>
 <div>
 <table id="tt"></table>
 </div>
</body/>

这里用到的是easyui的框架，所以先引用文件。

然后就是通过写js代码来显示出表格的行和列

 <script type="text/javascript">
 $(function () {
 //初始化表格
 inittable();
});

 //初始化表格
 function inittable() {
 $("#tt").datagrid({
 //指向一个地址，当表格加载完成后自动请求该地址
 //自动向后台发送 rows 当前页多少条数据 page：当前页
 //要求返回的数据json对象 {total:200,rows:[{},{}]}
 url: '/newinfo/shownewslist',
 title: "新闻管理",
 fitcolumns: true,
 height: $(window).height()-10,
 idfield: 'id', //后台返回数据中的主键列。一定注意大小写。
 loadmsg: "正在加载新闻信息........",
 pagination: true, //启用分页
 singleselect: true, //只允许选中一行
 pagesize: 10, //一页默认多少条
 pagenumber: 1, //默认页
 rownumbers: true,//行号
 pagelist: [10, 20, 30], //允许一页多少条数据
 queryparams: {}, //异步请求可以额外传递的数据
 columns: [[
 { field: 'ck', checkbox: true, align: 'left', width: 50 }, // 设置cheakbox
 { field: 'title', title: '标题', width: 120 },
 { field: 'subdatetime', title: '发布时间', width: 80, formatter: changedateformat, },
 { field: 'author', title: '作者', width: 80 },

  {
  field: 'operate', title: '操作', align: 'center', width: $(this).width() * 0.1,
  formatter: function (value, row, index) {
  var str = "";
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="detail" id="detail" class="easyui-linkbutton" onclick="showdetail('+row.id+')"></a>';
  str += '      ',
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="update" id="update" class="easyui-linkbutton" onclick="updatenewinfo(' + row.id + ')" ></a>';
  str += '      ',
  str += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="delete" id="delete" class="easyui-linkbutton" onclick="deletenewinfo(' + row.id + ')" ></a>';
  return str;
  }
  }

 ]],

 onloadsuccess: function (data) {
  $("a[name='detail']").linkbutton({ text: '详情', plain: true, iconcls: 'icon-more' });
  $("a[name='update']").linkbutton({ text: '编辑', plain: true, iconcls: 'icon-edit' });
  $("a[name='delete']").linkbutton({ text: '删除', plain: true, iconcls: 'icon-cancel' });
  ////点击详情按钮
  //clickdetail();
 },

 toolbar: [{
  id: 'btnadd',
  text: '添加',
  iconcls: 'icon-add',
  handler: function () {
  addbtnclick(); //添加新闻
  }
 }],
 });
 }

要完成数据的显示则还需要查询数据库。

根据 url: '/newinfo/shownewslist', 所以需要在newinfo控制器下建立shownewslist方法

 /// <summary>
 /// 分页展示数据
 /// </summary>
 /// <returns></returns>
 public jsonresult shownewslist()
 {
 //要求返回的数据json对象 {total:200,rows:[{},{}]}
 int pagesize = int.parse(request["rows"]??"10");
 int pageindex = int.parse(request["page"]??"1");
 list<newinfo> newinfolist= newinfobll.getpageentitylist(pageindex, pagesize);
 //查询所有数据
 var allnews = newinfobll.getrecordcount();
 //把totle和rows:[{},{}]一起返回
 //先建立一个匿名类
 var datajson = new { total = allnews, rows = newinfolist };
 var json = json(datajson, jsonrequestbehavior.allowget);
 return json;
 }

MVC+EasyUI+三层新闻网站建立分页查询数据功能（七）