JSP 前端数据本地排序实例代码

在前端中我们经常需要数据的排序，首先写引入我写好的js

$(function($) {
  $('#sclazzid').val($('#void').val());
  document.getelementsbyname('nameup')[0].style.display = "none";
  document.getelementsbyname('nameup')[1].style.display = "none";
  document.getelementsbyname('nameup')[2].style.display = "none";
  document.getelementsbyname('nameup')[3].style.display = "none";
  var tabobj = document.getelementbyid("tbvalue");
  /*
   * for (var i = 2; i < tabobj.rows.length; i++) {
   * 
   * if (tabobj.rows[i].cells[1].innerhtml == code) {
   * 
   * tabobj.rows[i].style.backgroundcolor = "red";
   * 
   * break; } }
   */
});
function onchange(code) {
  // alert(document.getelementbyid("drpindustry").value+"_"+code+".html");
  window.location.href = document.getelementbyid("drpindustry").value + "_"
      + code + ".html";

}

// 转换器，将列的字段类型转换为可以排序的类型：string,int,float
function convert(svalue, sdatatype) {
  switch (sdatatype) {
  case "int":
    if (svalue != "--")
      return parseint(svalue);
    else
      return -10000000000000;
  case "float":
    if (svalue != "--")
      return parsefloat(svalue);
    else
      return -10000000000000.0;
  case "date":
    if (svalue != "--")
      return new date(date.parse(svalue));
    else
      return "1900-01-01";
  default:
    return svalue.tostring();

  }
}

// 排序函数产生器，icol表示列索引，sdatatype表示该列的数据类型
function generatecomparetrs(icol, sdatatype) {

  return function comparetrs(otr1, otr2) {
    var vvalue1 = convert(otr1.cells[icol].firstchild.nodevalue, sdatatype);
    var vvalue2 = convert(otr2.cells[icol].firstchild.nodevalue, sdatatype);

    if (vvalue1 < vvalue2) {
      return -1;
    } else if (vvalue1 > vvalue2) {
      return 1;
    } else {
      return 0;
    }
  };
}
// 排序方法
function sorttable(stableid, icol, sdatatype) {
  if (document.getelementsbyname('nameup')[parseint(icol) - 1].style.display == 'none') {
    document.getelementsbyname('nameup')[parseint(icol) - 1].style.display = 'block';
    document.getelementsbyname('namedown')[parseint(icol) - 1].style.display = 'none';
  } else {
    document.getelementsbyname('nameup')[parseint(icol) - 1].style.display = 'none';
    document.getelementsbyname('namedown')[parseint(icol) - 1].style.display = 'block';
  }
  var otable = document.getelementbyid(stableid);
  var otbody = otable.tbodies[0];
  var coldatarows = otbody.rows;
  var atrs = new array;
  // 将所有列放入数组
  for (var i = 0; i < coldatarows.length; i++) {
    atrs[i] = coldatarows[i];
  }
  // 判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
  if (otable.sortcol == icol) {
    atrs.reverse();
  } else {
    // 使用数组的sort方法，传进排序函数
    atrs.sort(generatecomparetrs(icol, sdatatype));
  }

  var ofragment = document.createdocumentfragment();
  for (var i = 0; i < atrs.length; i++) {
    atrs[i].cells[0].innerhtml = i + 1;
    ofragment.appendchild(atrs[i]);
  }

  otbody.appendchild(ofragment);
  // 记录最后一次排序的列索引
  otable.sortcol = icol;
}

function detatilwork(id) {
  alert(id);
  $.post("", {
    id : id
  }, function() {

  });
}

function reflash() {
  window.location.reload(true);
}

function opensearch() {
  var name = $('#sname').val();
  var clazzid = $('#sclazzid').val();
  window.location.href = "assistantwork.action?name=" + name + "&clazzid="
      + clazzid;
}

function lastpage(page) {
  var name = $('#sname').val();
  var clazzid = $('#sclazzid').val();
  page = (page - 1 < 0) ? 0 : (page - 1);
  window.location.href = "assistantwork.action?page=" + page + "&name="
      + name + "&clazzid=" + clazzid;
}
function selpage(page) {
  var name = $('#sname').val();
  var clazzid = $('#sclazzid').val();
  window.location.href = "assistantwork.action?page=" + page + "&name="
      + name + "&clazzid=" + clazzid;
}
function nextpage(page, pages) {
  var name = $('#sname').val();
  var clazzid = $('#sclazzid').val();
  page = (page + 1 > pages) ? pages : (page + 1);
  window.location.href = "assistantwork.action?page=" + page + "&name="
      + name + "&clazzid=" + clazzid;
}

function detail(id, type) {
  $.ajax({
    url : 'selectonework.action?id=' + id,
    async : false, // 同步请求
    error : function() {
      alert("失败");
    },
    success : function(data) {
      data = eval("(" + data + ")");
      $('#workid').val(data.id);
      $('#cname').val(data.name);
      $('#sclazzidm').val(data.clazzid);
      $('#cdescription').val(data.description);
    },
  }, 'json');
  if(type==1){
    //查看 需要改成不可编辑
    setdisabled();
  }else if(type==2){
    cleandisabled();
  }
}

function add(){
  cleandisabled();
}
function setdisabled(){
  $('#cname').attr("disabled",true);
  $('#sclazzidm').attr("disabled",true);
  $('#cdescription').attr("disabled",true);
  $('#submitwork').attr("disabled",true);
}

function cleandisabled(){
  $('#cname').attr("disabled",false);
  $('#sclazzidm').attr("disabled",false);
  $('#cdescription').attr("disabled",false);
  $('#submitwork').attr("disabled",false);
}

在jsp页面中我们只需要在字段中嵌入这两div就可以实现视觉上的升序或降序，真正实现排序的是字段上面的那个点击事件，事件的执行方法在上面的脚本中都已经写好了，就这么简单，你就实现了表格数据的本地排序，大大的减少了与服务器之间的访问次数。

1.另外在说一句就是在我们的jsp中我们有的时候并不是很需要数据库数据的格式，这个时候我们需要将数据的格式进行转化，转化的方式有很多种，我们可以将数据在后台的时候进行格式处理，但是这样做的话在效率上并不是很快，我们在jsp中就有这样的标签

这样我们就实现了日期的格式化处理，值得注意的是这里的fmt只能用我页面上的布局，不能用工具上的格式化处理，处理过就会影响我们上面的本地排序，所以只能用我的格式

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！