分页查询插件：bs_pagination的使用

函数：如果一段用来完成特定功能的代码到处出现，可以封装成函数。

• 函数的参数：在编写函数的过程中，如果有一个或者多个数据无法确定，可以把这些数据定义成函数的参数(形参)，将来由函数的调用者来传递参数的具体的值(实参)。

分页查询插件：bs_pagination

• 前端插件的使用步骤：
  1.引入开发包：
  

  2.创建div容器:
  

<div id="demo_pag1"></div>

   3.当容器加载完成之后，对容器调用工具函数:

//对容器调用bs_pagination工具函数显示翻页信息
				$("#demo_pag1").bs_pagination({
					currentPage:pageNo,//当前页，相当于分页查询的pageNo(调用queryActivityByConditionForPage(pageNo,pageSize)函数把形参传过来)
					totalRows:data.totalRows,//总条数
					rowsPerPage:pageSize,//每页显示的条数，相当于pageSize
					totalPages: totalPages,//总页数，必填参数（等于总条数totalRows/每页显示条数rowsPerPage）
					visiblePageLinks: 10,//设置最多可以显示多少卡片数
					showGoToPage: true,//是否显示“跳转”部分，默认true--显示
					showRowsPerPage: true,//是否显示“每页条数”部分，默认true--显示
					showRowsInfo: true,//是否显示记录的信息 。默认true--显示
					showRowsDefaultInfo: true,
					/**
					 * 用户每次切换页号，都自动触发该函数
					 * 每次返回切换页号之后的pageNo和pageSize
					 */

根据条件查询后的结果以及分页js代码：

//查询市场活动信息
	function queryActivityByConditionForPage(pageNo,pageSize) {
		/**
		 * 当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数
		 *  pageNo = 1;默认第一页
		 *  pageSize = 10;默认每页显示十条数据
		 *收集参数
		 * @type {*|jQuery}
		 */
		 //根据条件（名称name、所有者owner、开始日期startDate、结束日期endDate）分页查询
		let name = $("#query-name").val();
		let owner = $("#query-owner").val();
		let startDate = $("#query-startDate").val();
		let endDate = $("#query-endDate").val();
		/*var pageNo = 1;
		var pageSize = 10;*/
		//发送请求
		$.ajax({
			url:'workbench/activity/queryActivityByDonditionForPage.do',
			data:{
				name:name,
				owner:owner,
				startDate:startDate,
				endDate:endDate,
				pageNo:pageNo,
				pageSize:pageSize
			},
			type:'post',
			dataType: 'json',
			success:function (data) {
				//获取总条数并渲染到页面
				//$("#totalRowsB").text(data.totalRows);
				//显示市场活动的列表
				//遍历activityList,拼接所有行数据
				var htmlStr = "";
				$.each(data.activityList,function (index,object) {
					htmlStr+="<tr class=\"active\">";
					htmlStr+="<td><input type=\"checkbox\" value=\""+object.id+"\" /></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" οnclick=\"window.location.href='detail.html';\">"+object.name+"</a></td>";
					htmlStr+="<td>"+object.owner+"</td>";
					htmlStr+="<td>"+object.startDate+"</td>";
					htmlStr+="<td>"+object.endDate+"</td>";
					htmlStr+="</tr>";
				});
				$("#tBody").html(htmlStr);//覆盖显示
				// $("#tBody").append(htmlStr);//追加，不覆盖

				//取消全选按钮
				$("#checkAll").prop("checked",false);

				//计算总页数
				var totalPages = 1;
				if(data.totalRows%pageSize==0){
					totalPages = data.totalRows/pageSize;
				}else {
					// 如果是小数，则调用parseInt()函数取整数部分
					totalPages = parseInt(data.totalRows/pageSize+1);
				}
				//对容器调用bs_pagination工具函数显示翻页信息
				$("#demo_pag1").bs_pagination({
					currentPage:pageNo,//当前页，相当于分页查询的pageNo(调用queryActivityByConditionForPage(pageNo,pageSize)函数把形参传过来)
					totalRows:data.totalRows,//总条数
					rowsPerPage:pageSize,//每页显示的条数，相当于pageSize
					totalPages: totalPages,//总页数，必填参数（等于总条数totalRows/每页显示条数rowsPerPage）
					visiblePageLinks: 10,//设置最多可以显示多少卡片数
					showGoToPage: true,//是否显示“跳转”部分，默认true--显示
					showRowsPerPage: true,//是否显示“每页条数”部分，默认true--显示
					showRowsInfo: true,//是否显示记录的信息 。默认true--显示
					showRowsDefaultInfo: true,
					/**
					 * 用户每次切换页号，都自动触发该函数
					 * 每次返回切换页号之后的pageNo和pageSize
					 */
					onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
						//js代码  queryActivityByConditionForPage(pageNo,pageSize)
						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage)
					},

				});

			}
		});

	}

默认分页查询为：

/**
		 * 当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数
		 *  pageNo = 1;默认第一页
		 *  pageSize = 8;默认每页显示八条数据
		 *收集参数
		 * @type {*|jQuery}
		 */
		queryActivityByConditionForPage(1,8);

点击条件"查询"按钮发送请求

//点击条件"查询"按钮发送请求
$("#queryActivityBtn").click(function () {
	//“查询”所有符合条件数据的第一页以及所有符合条件的总条数
/**
*调用分页插件的函数..bs_pagination获取每页要显示的总条目rowsPerPage
*$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'))
*/	queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
		});

完整查询后的结果以及分页后端代码：

 /**
     * 根据条件进行分页查询市场活动列表
     * @param name
     * @param owner
     * @param startDate
     * @param endDate
     * @param pageNo
     * @param pageSize
     * @return
     */
    @RequestMapping("/workbench/activity/queryActivityByDonditionForPage.do")
    @ResponseBody
    public Object queryActivityByDonditionForPage(String name, String owner,String startDate,String endDate,
                                                  int pageNo,int pageSize){
        //封装参数
        Map<String,Object> map = new HashMap<>();
        map.put("name",name);
        map.put("owner",owner);
        map.put("startDate",startDate);
        map.put("endDate",endDate);
        //开始页
        map.put("beginNo",(pageNo-1)*pageSize);
        //每页显示的条数
        map.put("pageSize",pageSize);
        //调用service层方法
        List<Activity> activityList = activityService.queryActivityByDonditionForPage(map);
        activityList.forEach(activity -> System.out.println("遍历根据条件分页查询的市场活动数据："+activity));
        int totalRows = activityService.queryCountOfActivityByCondition(map);
        //根据查询结果 生成响应信息
        Map<String,Object> retMap = new HashMap<>();
        retMap.put("activityList",activityList);
        retMap.put("totalRows",totalRows);
        return retMap;
    }

• 块元素和行元素：
  1.区别：行内元素中设置宽高是无效的，不会自动换行；而块级元素可以设置宽高，可以自动换行。行内元素中对margin设置左右方向有效而上下无效，padding设置左右方向有效而上下无效；块级元素中设置margin和padding都有效。

什么是块级元素？

总是在新行上开始；

高度，行高以及外边距和内边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度。

它可以容纳内联元素和其他块元素

例如：

<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

什么是行内元素？

和其他元素都在一行上；

高，行高及外边距和内边距不可改变；

宽度就是它的文字或图片的宽度，不可改变

内联元素只能容纳文本或者其他内联元素

例如：

<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

演示分页查询市场活动的过程：

queryActivityByConditionForPage(1,10)

   1.把pageNo,pageSize和查询条件一起发送到后台，查询数据
   2.data
        2.1activityList：遍历list，显示列表
    		2.1.1totalRows:调用工具函数，显示翻页信息

当用户切换页号或者每页显示条数时：pageNo,pageSize

   0.1翻页信息会自动变化
   2.手动刷新列表：
          2.1把pageNo,pageSize和查询条件一起发送到后台，查询数据
      		2.1.1data
           		2.1.1.1activityList：遍历list，显示列表
          		2.1.1.2totalRows:调用工具函数，显示翻页信息