首页面 创建保存线索，刷新列表和分页查询（线索列表）

于 2022-11-22 15:22:27 发布
阅读量289 收藏
点赞数
文章标签： java javascript mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h259077/article/details/127982366
版权

分页查询使用bs_pagination工具函数 显示翻页信息

首页面刚加载就调用分页函数默认查询第一页每页五条数据

  查询条件

获取输入文本框中查询条件     例：var fullname = $("#query-name").val();

页面刚加载显示列表信息（查询出所有数据 和数据的条数）

mapper层

/**
     * 根据条件分页查询线索列表
     * @param
     * @return 查询到的线索
     */
List<Clue> selectClueByConditionForPage(Map<String,Object> map);

    /**
     * 根据条件查询线索总条数
     * @param map 查询条件
     * @return 线索总条数
     */
    int selectCountOfClueByCondition(Map<String, Object> map)
<select id="selectClueByConditionForPage" parameterType="map" resultMap="BaseResultMap">
       select cl.id,cl.fullname,dicv1.value as appellation,
              u1.name as owner,cl.company,cl.job,cl.email,cl.phone,
              cl.website,cl.mphone
       ,dicv2.value as state
       ,dicv3.value as source
       ,u2.name as create_by,cl.create_time
        ,u3.name as edit_by,cl.edit_time,cl.description,cl.contact_summary,cl.next_contact_time,cl.address
           from tbl_clue cl
     left join tbl_dic_value dicv1 on cl.appellation=dicv1.id
     left join tbl_dic_value dicv2 on cl.state=dicv2.id
     left join tbl_dic_value dicv3 on cl.source=dicv3.id
     join tbl_user u1 on cl.owner=u1.id
     join tbl_user u2 on cl.create_by=u2.id
     left join tbl_user u3 on cl.edit_by=u3.id
      <where>
        <if test="fullname!='' and fullname!=null">
          and cl.fullname like '%' #{fullname} '%'
        </if>
           <if test="company!=null and company!=''">
             and cl.company like '%' #{company} '%'
           </if>
           <if test="phone!=null and phone!=''">
                and cl.phone  like '%' #{phone} '%'
           </if>
           <if test="source!=null and source!=''">
             and dicv3.value like '%' #{source} '%'
           </if>
           <if test="owner!=null and owner!=''">
              and u1.name like '%' #{owner} '%'
           </if>
        <if test="mphone!=null and mphone!=''">
          and cl.mphone like '%' #{mphone} '%'
        </if>
        <if test="state!=null and state!=''">
          and dicv2.value like '%' #{state} '%'
        </if>
      </where>
          order by cl.create_time desc
       limit #{beginNo},#{pageSize}
  </select>

  <select id="selectCountOfClueByCondition" resultType="int" parameterType="map">
    select count(*)
    from tbl_clue cl
    left join tbl_dic_value dicv1 on cl.appellation=dicv1.id
    left join tbl_dic_value dicv2 on cl.state=dicv2.id
    left join tbl_dic_value dicv3 on cl.source=dicv3.id
    join tbl_user u1 on cl.owner=u1.id
    join tbl_user u2 on cl.create_by=u2.id
    left join tbl_user u3 on cl.edit_by=u3.id
    <where>
      <if test="fullname!=null and fullname!=''">
        and cl.fullname like '%' #{fullname} '%'
      </if>
      <if test="company!=null and company!=''">
        and cl.company like '%' #{company} '%'
      </if>
      <if test="phone!=null and phone!=''">
        and cl.phone like '%' #{phone} '%'
      </if>
      <if test="source!=null and source!=''">
        and dicv3.value like '%' #{source} '%'
      </if>
      <if test="owner!=null and owner!=''">
        and u1.name like '%' #{owner} '%'
      </if>
      <if test="mphone!=null and mphone!=''">
        and cl.mphone like '%' #{mphone} '%'
      </if>
      <if test="state!=null and state!=''">
        and dicv2.value like '%' #{state} '%'
      </if>
    </where>
  </select>

service层和实现类

前端获取查询的条件给pageNo，pageSize赋值 1，5  

ajax携带参数跳转到controller层  

url: "workbench/clue/queryClueByConditionForPage.do"

controller层接受参数封装成map 调用 service，mapper层的查询方法

返回查询的数据列表和记录条数    clueList 和 totalRows 存入map 返回json数据 

前端success函数 接受到json数据

拼接html 把数据放到列表行 

$.each(data.clueList,function(index,obj)

 

分页插件     

//对容器调用bs_pagination工具函数 显示翻页信息

 分页查询中 根据接受的json数据 totalRows 计算页数

//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
   totalPages=data.totalRows/pageSize;
} else {
   totalPages=parseInt(data.totalRows/pageSize)+1;
}

$("#page-master").bs_pagination({
						currentPage: pageNo, // 当前页号,相当于pageNo
						rowsPerPage: pageSize, // 每页显示条数,相当于pageSize
						totalRows: data.totalRows, // 总条数
						totalPages: totalPages,  // 总页数,必填参数.
						visiblePageLinks: 5, // 最多可以显示的卡片数
						showGoToPage: true, // 是否显示"跳转到"部分，默认true显示
						showRowsPerPage: true, // 是否显示"每页显示条数"部分，默认true显示
						showRowsInfo: true, // 是否显示记录的信息，默认true显示

						//用户每次翻页都会触发本函数
						//每次返回切换页号之后的pageNo和pageSize
						onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
							// 重写发送当前页数和每页显示的条数（这也就意味着每次换页都将向后端 发送请求 查询当页数据）
							queryClueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
						}
					});

 

$(function(){

   // 线索页面加载完成后，查询所有数据第一页以及所有数据的总条数，默认每页显示5条数据
   queryClueByConditionForPage(1,5)；

//给"创建"按钮添加单击事件
   $("#createClueBtn").click(function () {};

    

//给"保存"按钮添加单击事件
      $("#saveCreateClueBtn").click(function () {}

}

 function queryClueByConditionForPage(pageNo,pageSize){

			var fullname = $("#query-name").val();
			var company = $("#query-company").val();
			var phone = $("#query-phone").val();
			var source = $("#query-source option:selected").text(); // 获取下拉框选中的线索来源
			var owner = $("#query-owner").val();
			var mphone = $("#query-mphone").val();
			var state = $("#query-state option:selected").text(); // 获取下拉框选中的线索状态
			// 前端向后端发送请求
		/*	var pageNo=1;
			var pageSize=5;*/
			//发送ajax请求
			$.ajax({
				url: "workbench/clue/queryClueByConditionForPage.do",
				data:{
					fullname:fullname,
					company:company,
					phone:phone,
					source:source,
					owner:owner,
					mphone:mphone,
					state:state,
					pageNo:pageNo,
					pageSize:pageSize
				},
				type: 'post',
				dataType: 'json',
				success: function (data) {
					//显示所有线索 遍历clueList 拼接所有行
					var htmlString="";
					$.each(data.clueList,function(index,obj){
						//checkbox中value存放线索的id属性 用于删除和修改调用
						htmlString += "<tr class=\"active\">";
						htmlString += "<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
						htmlString += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/clue/detailClue.do?id="+obj.id+"'\">"+obj.fullname+""+obj.appellation+"</a></td>";
						htmlString += "<td>"+obj.company+"</td>";
						htmlString += "<td>"+obj.phone+"</td>";
						htmlString += "<td>"+obj.mphone+"</td>";
						htmlString += "<td>"+obj.source+"</td>";
						htmlString += "<td>"+obj.owner+"</td>";
						htmlString += "<td>"+obj.state+"</td>";
						htmlString += "</tr>";
					});
					$("#tBody").html(htmlString);

                    $("#checkAll").prop("checked",false);

					//计算总页数
					var totalPages=1;
					if(data.totalRows%pageSize==0){
						totalPages=data.totalRows/pageSize;
					} else {
						totalPages=parseInt(data.totalRows/pageSize)+1;
					}

					//对容器调用bs_pagination工具函数 显示翻页信息
					$("#page-master").bs_pagination({
						currentPage: pageNo, // 当前页号,相当于pageNo
						rowsPerPage: pageSize, // 每页显示条数,相当于pageSize
						totalRows: data.totalRows, // 总条数
						totalPages: totalPages,  // 总页数,必填参数.
						visiblePageLinks: 5, // 最多可以显示的卡片数
						showGoToPage: true, // 是否显示"跳转到"部分，默认true显示
						showRowsPerPage: true, // 是否显示"每页显示条数"部分，默认true显示
						showRowsInfo: true, // 是否显示记录的信息，默认true显示

						//用户每次翻页都会触发本函数
						//每次返回切换页号之后的pageNo和pageSize
						onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
							// 重写发送当前页数和每页显示的条数（这也就意味着每次换页都将向后端 发送请求 查询当页数据）
							queryClueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
						}
					});
				}
			});

初始化页面先创建线索添加数据 保存信息    页面一加载就查询数据 显示列表栏中

添加查询条件 点击查询按钮

 

//给查询按钮添加单击事件
$("#queryClueBtn").click(function(){
   //查询所有符合条件的第一页以及所有符合条件数据的总条数
   queryClueByConditionForPage(1,$("#page-master").bs_pagination('getOption','rowsPerPage'));
});
//清空查询按钮单击事件
$("#clearClueBtn").click(function (){
   //清空查询框内的信息
   $(".clear-control").val("");
   //清空后返回初始查询信息
   queryClueByConditionForPage(1, $("#page-master").bs_pagination('getOption', 'rowsPerPage'));
});

 全选和取消全选按钮框

$("#checkAll").click(function(){
         //如果全选按钮选中 则列表中所有按钮都选中
          $("#tBody input[type='checkbox']").prop("checked",this.checked);
});
//当线索标签不是全选中是取消全选按钮
$("#tBody").on("click","input[type='checkbox']",function (){
   if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
      $("#checkAll").prop("checked",true);
   }else{
      $("#checkAll").prop("checked",false);
   }
});
h259077
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值