精华内容
下载资源
问答
  • jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
  • 主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下
  • table表格排序

    2015-07-15 15:23:38
    //需要排序的表头,以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = ...
  • 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在...
  • antd-- table表格排序

    2021-05-26 16:21:43
    按照数字排序 要求后端返回的level是数字 const columns = [ { title: '等级, dataIndex: 'level', key: 'name', render: (_) =>_, sorter: (a, b) => a.level - b.level, }, ] 自定义排序:仅做...

    按照数字排序

    要求后端返回的level是数字

      const columns = [
        {
          title: '等级,
          dataIndex: 'level',
          key: 'name',
          render: (_) =>_,
    sorter: (a, b) => a.level - b.level,
        },
    ]

    自定义排序:仅做示例

    假设后端返回的不是数字,而是时间,比如2021-05-24 10:54:31

    const columns=[   {
          title: '时间',
          dataIndex: 'gradeUpAt',
          render: (_) => _,
          sorter: {
            compare: (a, b) => {
              console.log('a')
              a = a.gradeUpAt == '无' ? 0 : new Date(a.gradeUpAt).getTime();
              b = b.gradeUpAt == '无' ? 0 : new Date(b.gradeUpAt).getTime();
              return a - b;
            },
          },
        },]

    通过请求后端接口排序

    分为四步:

    1. columns里面的sorter直接设为true
      const columns=[
      {
            title: '时间',
            dataIndex: 'exp',
            render: (_) => _,
            sorter: true
          },]

       

    2. 给table绑定onChange事件
       <Table
              columns={columns}
              dataSource={tabData}
          
              onChange={(pagination, filters, sorter) => { changetable(pagination, filters, sorter) }}
            />

       

    3. 监听onChange事件里面的sorter排序
        const changetable = (pagination, filters, sorter) => {
          if (sorter.order) {
      //当前处于升序或者降序 sorter.order == "descend" ? '降序' : '升序'
          } else {
            //取消排序
          }
        }

       

    4. 请求接口
    展开全文
  • jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
  • 像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态js的table排序插件等,最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改,虽有些勉强或有些地方...
  • table表格排序效果源码下载 table表格排序效果源码下载
  • 一款支持分类排序,按数字大小排序,按英文排序等等的jQuery Table表格排序显示代码。
  • jQuery table表格排序

    2018-05-12 03:27:18
    无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序
  • jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
  • Jquery对Table表格排序(方法一)

    千次阅读 2018-09-03 10:29:59
    table简单实例&lt;/title&gt; &lt;script type="text/javascript" src="jquery-1.7.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt;  ...

    <html>

    <title>table简单实例</title>
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    <style type="text/css">
         div
            {
                width: 1024px;
                margin: 0 auto; /*div相对屏幕左右居中*/
            }
            table
            {
                border: solid 1px #666;
                border-collapse: collapse;
                width: 100%;
                cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标(通常是一个箭头)*/
            }
            tr
            {
                border: solid 1px #666;
                height: 30px;
            }
            table thead tr
            {
                background-color: #ccc;
            }
            td
            {
                border: solid 1px #666;
            }
            th
            {
                border: solid 1px #666;
                text-align: center;
                cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/
            }
            .sequence
            {
                text-align: center;
            }
            .hover
            {
                background-color: #3399FF;
            }

    </style>


    <body>
    <div>
            <table id="tableSort" border="1px solid block;" cellspacing="0" cellpadding="0" >
                <thead>
                    <tr>
                        <th type="number">
                            序号
                        </th>
                        <th type="string">
                            书名
                        </th>
                        <th type="number">
                            价格(元)
                        </th>
                        <th type="string">
                            出版时间
                        </th>
                        <th type="number">
                            印刷量(册)
                        </th>
                        <th type="ip">
                            IP
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="hover">
                        <td class="sequence">
                            1
                        </td>
                        <td>
                            狼图腾
                        </td>
                        <td>
                            29.80
                        </td>
                        <td>
                            2009-10
                        </td>
                        <td>
                            50000
                        </td>
                        <td>
                            192.168.1.125
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            2
                        </td>
                        <td>
                            孝心不能等待
                        </td>
                        <td>
                            29.80
                        </td>
                        <td>
                            2009-09
                        </td>
                        <td>
                            800
                        </td>
                        <td>
                            192.68.1.125
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            3
                        </td>
                        <td>
                            藏地密码2
                        </td>
                        <td>
                            28.00
                        </td>
                        <td>
                            2008-10
                        </td>
                        <td>
                        </td>
                        <td>
                            192.102.0.12
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            4
                        </td>
                        <td>
                            藏地密码1
                        </td>
                        <td>
                            24.80
                        </td>
                        <td>
                            2008-10
                        </td>
                        <td>
                        </td>
                        <td>
                            215.34.126.10
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            5
                        </td>
                        <td>
                            设计模式之禅
                        </td>
                        <td>
                            69.00
                        </td>
                        <td>
                            2011-12
                        </td>
                        <td>
                        </td>
                        <td>
                            192.168.1.5
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            6
                        </td>
                        <td>
                            轻量级 Java EE 企业应用实战
                        </td>
                        <td>
                            99.00
                        </td>
                        <td>
                            2012-04
                        </td>
                        <td>
                            5000
                        </td>
                        <td>
                            192.358.1.125
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence">
                            7
                        </td>
                        <td>
                            Java 开发实战经典
                        </td>
                        <td>
                            79.80
                        </td>
                        <td>
                            2012-01
                        </td>
                        <td>
                            2000
                        </td>
                        <td>
                            192.168.1.25
                        </td>
                    </tr>
                    <tr>
                        <td class="sequence" οnclick="sortArray()">
                            8
                        </td>
                        <td>
                            Java Web 开发实战经典
                        </td>
                        <td>
                            69.80
                        </td>
                        <td>
                            2011-11
                        </td>
                        <td>
                            2500
                        </td>
                        <td>
                            215.168.54.125
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <script type="text/javascript">
            $(function () {
                var tableObject = $('#tableSort'); //获取id为tableSort的table对象
                var tbHead = tableObject.children('thead'); //获取table对象下的thead
                var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th
                var tbBody = tableObject.children('tbody'); //获取table对象下的tbody
                var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr
     
                var sortIndex = -1;
     
                tbHeadTh.each(function () {//遍历thead的tr下的th
                    var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
                    //给表态th增加鼠标位于上方时发生的事件
                    $(this).mouseover(function () {
                        tbBodyTr.each(function () {//编列tbody下的tr
                            var tds = $(this).find("td"); //获取列号为参数index的td对象集合
                            $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
                        });
                    }).mouseout(function () {//给表头th增加鼠标离开时的事件
                        tbBodyTr.each(function () {
                            var tds = $(this).find("td");
                            $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式
                        });
                    });
     
                    $(this).click(function () {//给当前表头th增加点击事件
                        var dataType = $(this).attr("type");//点击时获取当前th的type属性值
                        checkColumnValue(thisIndex, dataType);
                    });
                });
     
                $("tbody tr").removeClass(); //先移除tbody下tr的所有css类
                //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
                $("tbody tr").mouseover(function () {
                    $(this).addClass("hover");
                }).mouseout(function () {
                    $(this).removeClass("hover");
                });
     
                //对表格排序
                function checkColumnValue(index, type) {
                    var trsValue = new Array();
     
                    tbBodyTr.each(function () {
                        var tds = $(this).find('td');
                        //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中
                        trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
                        $(this).html("");
                    });
     
                    var len = trsValue.length;
     
                    if (index == sortIndex) {
                    //如果已经排序了则直接倒序
                        trsValue.reverse();
                    } else {
                        for (var i = 0; i < len; i++) {
                            //split() 方法用于把一个字符串分割成字符串数组
                            //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
                            type = trsValue[i].split(".separator")[0];
                            for (var j = i + 1; j < len; j++) {
                                //获取每行分割后数组的第二个值,即文本值
                                value1 = trsValue[i].split(".separator")[1];
                                //获取下一行分割后数组的第二个值,即文本值
                                value2 = trsValue[j].split(".separator")[1];
                                //接下来是数字\字符串等的比较
                                if (type == "number") {
                                    value1 = value1 == "" ? 0 : value1;
                                    value2 = value2 == "" ? 0 : value2;
                                    if (parseFloat(value1) > parseFloat(value2)) {
                                        var temp = trsValue[j];
                                        trsValue[j] = trsValue[i];
                                        trsValue[i] = temp;
                                    }
                                } else if (type == "ip") {
                                    if (ip2int(value1) > ip2int(value2)) {
                                        var temp = trsValue[j];
                                        trsValue[j] = trsValue[i];
                                        trsValue[i] = temp;
                                    }
                                } else {
                                    if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                                        var temp = trsValue[j];
                                        trsValue[j] = trsValue[i];
                                        trsValue[i] = temp;
                                    }
                                }
                            }
                        }
                    }
     
                    for (var i = 0; i < len; i++) {
                         $("#tableSort tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
                    }
     
                    sortIndex = index;
                }
     
                //IP转成整型
                function ip2int(ip) {
                    var num = 0;
                    ip = ip.split(".");
                    num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
                    return num;
                }
     
            })
        </script>

    </body>
    </html>

    原文地址:https://blog.csdn.net/wdfscp/article/details/8373311

    展开全文
  • 表格用法:$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })
  • js table表格排序

    2017-11-21 16:35:16
    一:表格排序效果,根据点击表格头部th进行排序,如图: 二:示例代码,如下: #tb1 { border: 1px solid #ddd; } #tb1 thead th{ width: 60px; } #tb1 tbody td { border: 1...

    一:表格排序效果,根据点击表格头部th进行排序,如图:


    二:示例代码,如下:

    <!DOCTYPE html>
    <html>
    
    
    	<head>
    		<style type="text/css">
    			#tb1 {
    				border: 1px solid #ddd;
    			}
    			#tb1 thead th{
    				width: 60px;
    			}
    			#tb1 tbody td {
    				border: 1px solid #ddd;
    				width: 60px;
    				text-align: center;
    				box-sizing: border-box;
    			}
    		</style>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    
    
    	<body>
    		<table id="tb1">
    			<thead>
    				<tr>
    					<th>姓名</th>
    					<th>年龄</th>
    					<th>平均分</th>
    					<th>总分</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>小红</td>
    					<td>21</td>
    					<td>24</td>
    					<td>16</td>
    				</tr>
    				<tr>
    					<td>小强</td>
    					<td>23</td>
    					<td>2</td>
    					<td>19</td>
    				</tr>
    				<tr>
    					<td>小明</td>
    					<td>14</td>
    					<td>50</td>
    					<td>24</td>
    				</tr>
    			</tbody>
    		</table>
    		<script type="text/javascript">
    			//获取table表格,获取th,获取tbody下的tr
    			var table = document.getElementById("tb1");
    			var table_th = document.getElementsByTagName("th");
    			var table_tbody = table.getElementsByTagName("tbody")[0];
    			var table_tr = table_tbody.getElementsByTagName("tr");
    			function itemClick(i) {//i表示点击单个th
    				table_th[i].onclick = function() {
    					var temp_arr = [];//存放每个th对应的内容,根据内容进行排序
    					var temp_tr_arr = [];//存放每个th对应内容的行
    					for(j = 0; j < table_tr.length; j++) {
    						if(table_tr[j].getElementsByTagName("td")[i].innerHTML==' '){
    							temp_arr.push('0')
    						}else{
    							temp_arr.push(table_tr[j].getElementsByTagName("td")[i].innerHTML);
    						}
    						temp_tr_arr.push(table_tr[j].cloneNode(true));
    					};
    					//清空tbody内容
    					table_tbody.innerHTML='';
    					var temp = parseInt(temp_arr[0]) || temp_arr[0];
    					//定义排序方式
    					if(typeof(temp) == 'number') {
    						temp_arr.sort(function(a, b) { return a - b; });
    					} else {
    						temp_arr.sort();
    					}
    					//重新进行排序
    					for(k = 0; k < temp_arr.length; k++) {
    						for(vv = 0; vv < temp_tr_arr.length; vv++) {
    							if(temp_arr[k] == temp_tr_arr[vv].getElementsByTagName("td")[i].innerHTML) {
    								table_tbody.appendChild(temp_tr_arr[vv]);
    							}
    						}
    					}
    				}
    			}
    			for(i = 0; i < table_th.length; i++) {
    				itemClick(i);
    			}
    		</script>
    	</body>
    
    
    </html>
    


    展开全文
  • element-UI:el-table 表格排序 需求:el-table 需要支持排序,即点击当前列头实现排序。 最终实现效果: 思路:

    element-UI:el-table 表格排序

    需求:el-table 需要支持排序,即点击当前列头实现排序。
    最终实现效果:在这里插入图片描述
    html 部分:

    1.给el-table设置事件 @sort-change=“sortChange”
    2.给需要排序的表格列设置属性 :sortable="‘custom’"

    <el-table 
          v-loading="tabLoading"
          :data="tableData"
          :header-cell-style="entityHeaderClass"
          :element-loading-text="$t('common.loading')"
          element-loading-background="rgba(255, 255, 255, 0.75)"
          stripe
          :height="listenTableHeight + 'px'"
          style="width: 100%"
          @sort-change="sortChange"
        >
          <el-table-column 
            :sortable="'custom'" 
            prop="customer_num" 
            label="客户编号" 
            align="center"
          >
          </el-table-column>
    </el-table>
    

    @sort-change 事件官网解释如图:

    在这里插入图片描述
    js 部分:

    prop:排序那列表格的字段名
    order:排序的方式 ascending == 升序 descending == 降序 null == 不排序

    data() {
    	return {
    	  tabSort: 0, //该字段代表升序还是降序 假设:0正序 1倒序
    	  tabProp: '' //prop绑定的字段名
    	}
    },
    sortChange(column){
    	// 当前列的排序  ascending 升序 descending 降序 
    	if (column.order == "ascending") {
    	  this.tabSort = 0
    	} else if (column.order == "descending") {
    	  this.tabSort = 1
    	} else {
    	  this.tabSort = 0
    	}
    	// 当前点击列名
    	this.tabProp = column.prop
    	this.pagenum = 1
    	// 调后端接口,把后端需要的参数传递给后端,就可以实现排序
    	this.GetMembersPagination()
    }
    
    展开全文
  • 今天小编就为大家分享一篇vue element table 表格请求后台排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 页面代码,基本上排序的参数都使用了 <el-table :data="tableData" style="width: 100%" <!-- 数据由后台进行排序时sortable=...
  • table表格排序js插件(高效简洁)

    千次阅读 2016-03-22 09:00:25
    在前不久做的一个web项目中,需要实现js表格排序的效果,当时为了省事,就在网上找了几个相关的js插件,像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态js的table排序插件等,...
  • 排序的React表组件 一个用 React props 动态接收数据的 react table 组件,可以按列排序。 使用快速排序。 发展 npm install gulp npm start
  • 使用jQuery实现table表格排序js插件

    千次阅读 2013-12-16 14:07:03
    在前不久做的一个web项目中,需要实现js表格排序的效果,当时为了省事,就在网上找了几个相关的js插件,像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态js的table排序插件等,...
  • 表格内容 根据票据日期升序(这里是已经排序后的效果) 上代码 代码中data的内容如下 根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...
  • vue element table表格 自定义排序规则

    千次阅读 2021-01-22 10:33:29
    项目需求:前端做排序,后台返回的数据有合计一项,排序时,合计始终在最后一行 使用 @sort-change='sortChange' <el-table-column prop="revPar" align='center' sortable="custom" label="RevPAR" ...
  • table id="group-table" data-toggle="table" class="table table-striped table-hover" style="border: 1px solid #e4eaec; margin-top: 10px;"></table> //获取共享组 var $groupTable = $('#group-...
  • iview Table表格 远程排序以及自定义过滤 iView Table Api 因为iView Table默认是排序当前页,所以直接在Columns 设置sortable设置为true,是行不通得,因为我本次需求是将整个表格排序,而不是当前页,取其最大最小...
  • vue element table 表格列进行再排序

    千次阅读 2019-02-27 14:08:23
    示例 展示 http://www.oujin.fun/webPage/dragTable/index.html#/ 用法 https://github.com/oujin-nb/column_element_dragtable 源码 &lt;...el-table v-on="$listeners" v-bi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,960
精华内容 25,584
关键字:

table表格排序