xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > JQuery的Pager分页器实现代码,js上传报错的解决方

JQuery的Pager分页器实现代码,js上传报错的解决方

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 22:00

更多关于分页教程的文章,请查看以下专题:

<!DOCTYPE html>
<html lang="zh-CN">

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/csslib.jsp"%>

<head>
<link type="text/css" rel="stylesheet" href="${ctx}/css/deal/my_pay_list.css" />
</head>
<body>
  <div class="container">
    <form class="form-horizontal" id="jqgridForm" role="form" action="${ctx}/deal/datablePayDealOrdersList"
    method="post">
    <div class="form-group">
      <div class="col-sm-12">
        <label for="name" class="control-label pull-left">项目名称:</label>
        <div class="col-sm-3">
          <input type="text" name="name" class="form-control" id="name" placeholder="请输入项目名称" value="" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button type="button" class="btn btn-primary pull-right" id="searchBtn">检索</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <table id="pageGrid" rel="jqgridForm" class="jqgrid"></table>
        <div id="pageGridPager"></div>
      </div>
    </div>
  </form>
</div>
<%@ include file="/components/common/jslib.jsp"%>
<script type="text/javascript" src="${ctx}/js/deal/my_pay_list.js"></script>
</body>
</html>

相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作。代码我省略的比较多,直接拿js那里的

以上就是本文的全部内容,希望对大家的学习有所帮助。

你完全可以不关注RowBounds ,mybatis内部会自动为你封装好limit的。检索域的name可以直接通过mo.name或得到。orderField、orderDirection也传递过来了。

uploadHttpData: function( r, type ) {
 var data = !type;
 data = type == "xml" || data ? r.responseXML : r.responseText;
 // If the type is "script", eval it in global context
 if ( type == "script" )
  jQuery.globalEval( data );
 // Get the JavaScript object, if JSON is used.
 if ( type == "json" ){
  // 因为json数据会被<pre>标签包着,所以有问题,现在添加以下代码,
  // update by hzy
  var reg = /<pre. ?>(. )</pre>/g; 
  var result = data.match(reg);
  result = RegExp.$1;
  // update end
  data = $.parseJSON(result);
  // eval( "data = "   data );
 // evaluate scripts within html
 }
 if ( type == "html" )
  jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
 return data;
 }

您可能感兴趣的文章:

  • 基于JQuery的Pager分页器实现代码
  • 一款Jquery 分页插件的改造方法(服务器端分页)
  • 用jQuery中的ajax分页实现代码
  • jQuery EasyUI API 中文文档 - Pagination分页
  • JQuery Ajax无刷新分页的实例代码
  • jQuery scroll事件实现监控滚动条分页示例
  • jquery向上向下取整适合分页查询
  • bootstrap table 服务器端分页例子分享
  • jQuery前端分页示例分享
  • jQuery EasyUI datagrid实现本地分页的方法
 protected BaseConditionVO getBaseConditionVOForTable() {
    BaseConditionVO vo = new BaseConditionVO();
    // 分页的参数
    int currentPage = getParaToInt("page");
    int sizes = getParaToInt("rows");
    String sortOrder = getPara("sord");
    String sortCol = getPara("sidx");
    vo.setNumPerPage(sizes);
    vo.setPageNum(currentPage);
    vo.setOrderField(sortCol);
    vo.setOrderDirection(sortOrder);

    return vo;
  }
将jqGrid传递的参数转换为BaseConditionVO分页查询对象。

protected void renderXml(HttpServletResponse res, String xmlResponse) {
    try {
      res.setCharacterEncoding("UTF-8");
      res.setHeader("Content-type", "text/xml");
      PrintWriter out = res.getWriter();
      out.print(xmlResponse);
      if (out != null) {
        out.close();
      }
    } catch (IOException e) {
      logger.error(e.getMessage());
      logger.error(e.getMessage(), e);
    }

  }

按照教程,这样子上传的话是没有问题的,可是它一直有一个报错。报的是什么错有点忘了,不好意思 ,因为用完很久才记得补回这篇文章,但是要修改它的源码,那个错误就可以解决了 

图片 1

package com.honzh.common.page;

import org.apache.commons.lang.StringUtils;

import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.converters.Converter;
import com.thoughtworks.xstream.io.xml.DomDriver;
import com.thoughtworks.xstream.mapper.DefaultMapper;
import com.thoughtworks.xstream.mapper.XStream11XmlFriendlyMapper;

public class XStreamComponent {
  private XStream xstream;

  public static XStreamComponent newInstance() {
    XStreamComponent xmlComponent = new XStreamComponent();
    xmlComponent.alias(new Class[] { PageGrid.class });

    return xmlComponent;
  }

  public XStreamComponent() {
    this.xstream = new XStream(new DomDriver());
  }

  public String toXML(Object obj) {
    return this.xstream.toXML(obj);
  }

  public String toPageXML(Object obj) {
    registerConverter(new MapCustomConverter(new DefaultMapper(XStream11XmlFriendlyMapper.class.getClassLoader())));
    return toXML(obj);
  }

  public Object fromPageXML(String xml) {
    registerConverter(new MapCustomConverter(new DefaultMapper(XStream11XmlFriendlyMapper.class.getClassLoader())));
    return fromXML(xml);
  }

  public Object fromXML(String xml) {
    return this.xstream.fromXML(xml);
  }

  @SuppressWarnings("rawtypes")
  public void processAnnotations(Class type) {
    this.xstream.processAnnotations(type);
  }

  @SuppressWarnings("rawtypes")
  public void processAnnotations(Class[] types) {
    this.xstream.processAnnotations(types);
  }

  @SuppressWarnings("rawtypes")
  public void alias(String name, Class type) {
    this.xstream.alias(name, type);
  }

  @SuppressWarnings("rawtypes")
  public void alias(Class[] types) {
    for (Class type : types) {
      String className = type.getName();
      try {
        String[] classNames = StringUtils.split(className, ".");
        this.xstream.alias(classNames[(classNames.length - 1)], type);
      } catch (Exception ex) {
        this.xstream.alias(className, type);
      }
    }
  }

  public void registerConverter(Converter converter) {
    this.xstream.registerConverter(converter);
  }

  @SuppressWarnings("rawtypes")
  public void useAttributeFor(Class definedIn, String fieldName) {
    this.xstream.useAttributeFor(definedIn, fieldName);
  }
}

将这一段改为这样子

情况1,当total < 8 时,所有的页码全部显示。

我们来详细说明一下:

这样就可以正常使用了。

javascript分页功能操作 jquery分页功能操作 php分页功能操作 ASP.NET分页功能操作

function initLayout() {
  $("table[rel=jqgridForm]").each(function() {
    var rel = $(this).attr("rel");
    if (rel) {
      var $form = $("#"   rel);
      var tableWidth = $form.width();
      $(this).setGridWidth(tableWidth, true);
    }
  });
}

您可能感兴趣的文章:

  • SpringMVC结合ajaxfileupload.js实现文件无刷新上传
  • 使用ajaxfileupload.js实现上传文件功能
  • jQuery插件ajaxfileupload.js实现上传文件
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • asp.net ajaxfileupload.js 实现文件异步上传代码分享
  • ajaxFileUpload.js插件支持多文件上传的方法
  • 使用ajaxfileupload.js实现ajax上传文件php版
  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
  • 使用AjaxFileUpload.js实现异步文件上传示例
  • AjaxUpLoad.js实现文件上传功能

当我们实例化Pager时,执行Pager函数体内的语句,首先赋值,然后就执行初始化函数:

initLayout

uploadHttpData: function( r, type ) {
 var data = !type;
 data = type == "xml" || data ? r.responseXML : r.responseText;
 // If the type is "script", eval it in global context
 if ( type == "script" )
  jQuery.globalEval( data );
 // Get the JavaScript object, if JSON is used.
 if ( type == "json" )
  eval( "data = "   data );
 // evaluate scripts within html
 if ( type == "html" )
  jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
 return data;
 }

本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下

package com.honzh.common.page;

import java.util.List;

import com.thoughtworks.xstream.annotations.XStreamAlias;

@XStreamAlias("pageGrid")
@SuppressWarnings("rawtypes")
public class PageGrid {
  private int page;
  private int total;
  private int records;

  private List data;

  public int getPage() {
    return this.page;
  }

  public void setPage(int page) {
    this.page = page;
  }

  public int getTotal() {
    return this.total;
  }

  public void setTotal(int total) {
    this.total = total;
  }

  public int getRecords() {
    return this.records;
  }

  public void setRecords(int records) {
    this.records = records;
  }

  public List getData() {
    return this.data;
  }

  public void setData(List data) {
    this.data = data;
  }
}

它源码的最后一段是这样子的

效果图:

数据操作部分,我认为包含有 检索参数传递、分页排序参数传递、sql语句的编写。

$.ajaxFileUpload({
   url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本
   secureuri :false,
   fileElementId :'image2',//file控件id。就是input type="file" id="image2"
   dataType : 'json',
   success : function (data, status){
    console.log(data);
   },
   error: function(data, status, e){
    alert(e);
   }
   })

pager.js代码

也就是说,在窗口缩放的时候,我们为jqGrid重新绘制宽度,使其自适应于bootstrap的响应式布局。使用的方法就是jqGrid的setGridWidth方法。

handleError: function( s, xhr, status, e )  { 
  // If a local callback was specified, fire it 
    if ( s.error ) { 
     s.error.call( s.context || s, xhr, status, e ); 
    } 

    // Fire the global callback 
    if ( s.global ) { 
     (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); 
    } 
 } 

css代码:

function initEnv(jqOption) {

  $(window).resize(function() {
    initLayout();
  });

  initUI(null, jqOption);
}

版本1.4.2之前的版本才有handlerError方法,例子里使用的Jquery是1.2的,解决方法:

{
 parent: element, //给分页器设置父节点
 index: index, //设置当前页
 total: total, //设置总页数
 onchange: function(){} //页数变化回调函数
}

mapper.xml

另一种情况:ajaxFileUpload 报这错jQuery.handleError is not a function

主要思路:

①、 jqGrid在bootstrap中的布局方案

以上就是面对ajaxupload.js上传报错问题的解决方法,希望能帮助大家解决困难,也希望大家继续关注脚本之家更多精彩内容。

情况4,当total >= 8 且 5 <= index <= total - 4时,显示1和最后一页,和中间5项。

OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我们在缘由的jqGrid上进行一些改动,同时对组件进行一定的封装。

为了能够继续使用ajaxfileupload上传我们的附件,只好将下面代码拷进我们的项目中的ajaxfileupload.js文件中

情况2,当total >= 8 且 index < 5时,显示1-6和最后一页。

BaseConditionVO.java

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

Pager类实例化时传入一个设置对象:

定义完了这些基础的对象,接下来,我们就要着手获取数据和传递数据了。

(function(window, undefined){

 /**
 * 创建元素节点并返回
 */
 function create(tagName, className, parent){
 var element = document.createElement(tagName);
 element.className = className;
 parent.appendChild(element);
 return element;
 }

 /**
 * 数组消除重复
 */
 function clearRepeat(arr){
 var obj = {},
  result = [];
 for(var i = 0, len = arr.length; i < len; i  ){
  obj[arr[i]] = 1;
 }
 for(var i in obj){
  result.push(i);
 }
 return result;
 }

 /**
 * 添加类名
 */
 function addClassName(element, className){
 var aClass = element.className.split(' ');
 aClass.push(className);
 aClass = clearRepeat(aClass);
 element.className = aClass.join(' ');
 }
 /**
 * 删除类名
 */
 function delClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) aClass.splice(index, 1);
 element.className = aClass.join(' ');
 }

 /**
 * 检查是否含有类名
 * @param element
 * @param className
 * @returns {boolean}
 */
 function hasClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) return true;
 return false;
 }

 var Pager = function(obj){

 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分页器
 this.__init(obj);

 };

 var pro = Pager.prototype;
 /**
 * 初始化分页器
 */
 pro.__init = function(obj){
 if(this.__total < this.__index) return;
 //存储数字
 this.__numbers = [];
 //储存省略号
 this.__dots = [];
 this.__wrapper = create('div', 'pager-box', this.__parent);
 this.__body = create('div', 'pager', this.__wrapper);
 //存储上一页
 this.__preBtn = create('a', 'prev', this.__body);
 this.__preBtn.href = 'javascript:void(0);';
 this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
 //存储数字
 if(this.__total < 8){
  for(var i = 0; i < this.__total; i  ){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  t.innerText = i   1;
  this.__numbers.push(t);
  }
 }else{
  for(var i = 0; i < 2; i  ){
  var t = create('span', 'dots', this.__body);
  t.innerText = '...';
  this.__dots.push(t);
  };
  for(var i = 0; i < 7; i  ){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  this.__numbers.push(t);
  }

 }
 //存储下一页
 this.__nextBtn = create('a', 'next', this.__body);
 this.__nextBtn.href = 'javascript:void(0);';
 this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一页';
 //
 this._$setIndex(this.__index);
 //
 this.__body.onclick = this.__doClick.bind(this);
 };

 pro.__doClick = function(e){
 var e = e || window.event,
  target = e.target || e.srcElement;
 //点击省略号
 if(target.tagName.toLowerCase() == 'span') return;
 //点击了不能点击的上一页或者下一页
 if(hasClassName(target, 'js-disabled')) return;
 //点击了当前页
 if(hasClassName(target, 'js-selected')) return;

 if(target == this.__preBtn){
  //点击了上一页
  this._$setIndex(this.__index - 1);
 }else if(target == this.__nextBtn){
  //点击了下一页
  this._$setIndex(this.__index   1);
 }else{
  //点击了数字
  var index = target.innerText;
  this._$setIndex(index);
 }

 };

 /**
 * 跳转页数
 */
 pro._$setIndex = function(index){

 index = parseInt(index);
 //更新信息
 if(index != this.__index){
  this.__last = this.__index;
  this.__index = index;
 }
 //处理
 delClassName(this.__preBtn, 'js-disabled');
 delClassName(this.__nextBtn, 'js-disabled');
 if(this.__total < 8){
  //总页数小于8的情况
  if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');

 }else{
  this.__dots[0].style.display = 'none';
  this.__dots[1].style.display = 'none';
  for(var i = 0; i < 7; i  ){
  delClassName(this.__numbers[i], 'js-selected');
  };
  if(this.__index < 5){
  for(var i = 0; i < 6; i  ){
   this.__numbers[i].innerText = i   1;
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  }else if(this.__index > this.__total - 4){
  for(var i = 1; i < 7; i  ){
   this.__numbers[i].innerText = this.__total   i -6;
  }
  this.__numbers[0].innerText = '1';
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  addClassName(this.__numbers[this.__index   6 - this.__total], 'js-selected');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
  }else{
  this.__numbers[0].innerText = '1';
  for(var i = 1; i < 6; i  ){
   this.__numbers[i].innerText = this.__index - 3   i;
   if(i == 3) addClassName(this.__numbers[i], 'js-selected');
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  }

 }
 if(typeof this.__onchange == 'function'){
  this.__onchange({
  index: this.__index,
  last: this.__last,
  total: this.__total
  })
 }

 };
 /**
 * 得到总页数
 */
 pro._$getIndex = function(){
 return this.__index;
 };
 /**
 * 得到上一个页数
 */
 pro._$getLast = function(){
 return this.__last;
 };
 //变成全局
 window.Pager = Pager;

})(window);

项目中需要xstream.jar,自行下载。

初始化完成,点击后就会做出相应的判断,并使用this._$setIndex(index)进行跳转。

分页的查询数据对象,包括分页、排序、检索域。

分页器共分为以下4种情况:

一点都不熟悉jqGrid的同学,建议先看jqGrid的demo,以及jqGrid的官方文档,当然了,对于已经熟悉jqGrid的同学,doc和demo肯定是必看的。

代码:

MapCustomConverter.java

下载:paper.rar)

图片 2

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:JQuery的Pager分页器实现代码,js上传报错的解决方

关键词: GPI电子游戏