在前端中我们经常需要数据的排序,首先写引入我写好的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只能用我页面上的布局,不能用工具上的格式化处理,处理过就会影响我们上面的本地排序,所以只能用我的格式

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

JSP 前端数据本地排序实例代码的更多相关文章

  1. NT IIS下用ODBC连接数据库

    $connection=intodbc_connect建立数据库连接,$query_string="查询记录的条件"如:$query_string="select*fromtable"用$cur=intodbc_exec检索数据库,将记录集放入$cur变量中。再用while{$var1=odbc_result;$var2=odbc_result;...}读取odbc_exec()返回的数据集$cur。最后是odbc_close关闭数据库的连接。odbc_result()函数是取当前记录的指定字段值。

  2. Thinkphp5框架实现获取数据库数据到视图的方法

    这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下

  3. 如何在PHP环境中使用ProtoBuf数据格式

    这篇文章主要介绍了如何在PHP环境中使用ProtoBuf数据格式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  5. Python爬取奶茶店数据分析哪家最好喝以及性价比

    这篇文章主要介绍了用Python告诉你奶茶哪家最好喝性价比最高,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

  6. Android本地存储方法浅析介绍

    这篇文章主要介绍了Android本地存储案例,方法简单可以实现存储并达到节省内存的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

  7. 详解Python如何实现Excel数据读取和写入

    这篇文章主要为大家详细介绍了python如何实现对EXCEL数据进行读取和写入,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. jsp ${param.id}用法

    ${id} 意思是取出某一范围中名称为id的变量。

  9. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  10. Python自动化办公之Excel数据的写入

    这篇文章主要为大家详细介绍一下Python中excel的写入模块- xlsxwriter,并利用该模块实现Excel数据的写入,感兴趣的小伙伴可以了解一下

随机推荐

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. Java利用POI实现导入导出Excel表格

    这篇文章主要为大家详细介绍了Java利用POI实现导入导出Excel表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. Mybatis分页插件PageHelper手写实现示例

    这篇文章主要为大家介绍了Mybatis分页插件PageHelper手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  5. Java 阻塞队列BlockingQueue详解

    本文详细介绍了BlockingQueue家庭中的所有成员,包括他们各自的功能以及常见使用场景,通过实例代码介绍了Java 阻塞队列BlockingQueue的相关知识,需要的朋友可以参考下

  6. Java异常Exception详细讲解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  7. Java Bean 作用域及它的几种类型介绍

    这篇文章主要介绍了Java Bean作用域及它的几种类型介绍,Spring框架作为一个管理Bean的IoC容器,那么Bean自然是Spring中的重要资源了,那Bean的作用域又是什么,接下来我们一起进入文章详细学习吧

  8. 面试突击之跨域问题的解决方案详解

    跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。那怎么解决这个问题呢?接下来我们一起来看

  9. Mybatis-Plus接口BaseMapper与Services使用详解

    这篇文章主要为大家介绍了Mybatis-Plus接口BaseMapper与Services使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. mybatis-plus雪花算法增强idworker的实现

    今天聊聊在mybatis-plus中引入分布式ID生成框架idworker,进一步增强实现生成分布式唯一ID,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部