bootstrapDualListbox 分页显示

最新推荐文章于 2024-04-15 09:31:46 发布

执于代码

最新推荐文章于 2024-04-15 09:31:46 发布

阅读量459

点赞数

本文链接：https://blog.csdn.net/xiamaocheng/article/details/102699156

版权

前段分页效果：

相关代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title> CRUD</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <link href="${ctx}/js/gpoint/rdp/zone/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${ctx}/js/gpoint/rdp/zone/css/bootstrap-duallistbox.min.css" rel="stylesheet" />
    
   <script src="${ctx}/js/gpoint/rdp/zone/jquery-3.0.0.min.js"></script>
    <script src="${ctx}/js/gpoint/rdp/zone/bootstrap.min.js"></script>
    <script src="${ctx}/js/gpoint/rdp/zone/jquery.bootstrap-duallistbox.js"></script>
    
    
     <link type="text/css" rel="stylesheet" href="${ctx}/js/gpoint/rdp/zone/css/bootstrap.css">

<script type="text/javascript" src="${ctx}/js/gpoint/rdp/zone/bootstrap-paginator.js"></script>


</head>

<body>

<div class="col-md-7">
        <select multiple="multiple" size="10" name="duallistbox_demo1" class="demo1">
        </select>
        <br />
       <ul class="pagination"  id="page"></ul>
    </div>
    
 
</body>


	

<script type="text/javascript">
$(function() {
	
	alert("分页开始执行");
	 pageStart();//开始分页
			
	 function pageStart() {//分页函数
	    $.ajax({ //去后台查询第一页数据
			type : "get",
			url : "http://127.0.0.1:8083/rdp/user/campusCard/listJson",
			dataType : "json",
			data : {page : '1'}, //参数：当前页为1
			success : function(data) {
					
				
				//需要增加异常处理
				
			  appendHtml(data);//处理第一页的数据
				
			  var options = {//根据后台返回的分页相关信息，设置插件参数
				bootstrapMajorVersion : 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
				currentPage : data.page, //当前页数
				totalPages : data.total, //总页数
				numberOfPages : 20,//每页记录数
				itemTexts : function(type, page, current) {//设置分页按钮显示字体样式
					switch (type) {
					case "first":
						return "首页";
					case "prev":
						return "上一页";
					case "next":
						return "下一页";
					case "last":
						return "末页";
					case "page":
						return page;
					}
				},
			  onPageClicked : function(event, originalEvent, type, page) {//分页按钮点击事件
				
				$.ajax({//根据page去后台加载数据
					url : "http://127.0.0.1:8083/rdp/user/campusCard/listJson",
					type : "get",
					dataType : "json",
					data : {"page" : page,"rows":20},
					success : function(data) {
						
						  $("." + 'demo1' + "").empty();
						  
							/*   $('.demo1').bootstrapDualListbox({
									
								  removeAllLabel: '移除全部option',//移除全部option按钮的label，默认'Remove all'
								  
								}); */
							//  $("." + 'demo1' + "")[0].options.remove();
							   $('.demo1').bootstrapDualListbox('removeSelectedLabel');
							 //  $('.demo1').bootstrapDualListbox('setMoveAllLabel', "");
							   $('.demo1').bootstrapDualListbox('setMoveAllLabel','', true);
							 //  $('.demo1').bootstrapDualListbox('destroy');
							 
							 
						appendHtml(data);//处理数据
				     alert("获取分页数据结束");
					}
				});
			  }
		    };
			$('#page').bootstrapPaginator(options);//设置分页
			}
		});
	}
	 
	 
	
	 
	 
	  function appendHtml(returnData) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
		  var objs = $.parseJSON( JSON.stringify(returnData));
          
            $(objs).each(function () {
               
                 var objA=objs.rows;    
                 for(var i=0;i<objA.length;i++){
                	  var o = document.createElement("option");
                	  o.value = objA[i]['carduid'];
                     o.text =  objA[i]['carduid'];
                     $("." + 'demo1' + "")[0].options.add(o);
                    
                     $('.demo1').bootstrapDualListbox('refresh');
                 }
               
               
               
            });      //渲染dualListbox
            $('.' + 'demo1' + '').bootstrapDualListbox({
                nonSelectedListLabel: '用户',
                selectedListLabel: '已选用户',
                preserveSelectionOnMove: 'moved',
                moveOnSelect: false//,
                //nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
            });
            
	  }
	});











       

	  
	  
    </script>
</html>

执于代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
bootstrapDualListbox 分页显示

前段分页效果：相关代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><html><head> <t...
复制链接

扫一扫