如题:我点击一列的列头,就对那整列进行排序,只是数字的

解决方案 »

  1.   

    你可以查下table排序  不过现在已经有很多这样的库了 可以查查
      

  2.   

    jquery 有这样的插件搜搜下。
      

  3.   

    你是用什么控件展示数据的? Web的还是MVC的
      

  4.   

    这个是我的代码,现在我不知道哪里出问题,点了列头浏览器就崩溃了~~~<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <head>
     <meta name="generator" content="editplus" />  
      <meta name="author" content="" />  
      <meta name="keywords" content="" />  
      <meta name="description" content="" />  
      <script type="text/javascript" src="jquery-1.4.3.js"></script>  
      <script type="text/javascript" src="sorttable.js"></script> 
      <script type="text/javascript" src="jquery-1.5.1.min.js"></script>>    </script>   
       <style type="text/css"> 
        /*表格样式*/
        .tbData {
            border-collapse:collapse;
            border-spacing:0px;
            border:solid 3px #ddd;
            font-size:14px;
            font-family:Consolas;
            color:#333;
            background-color:white;
            margin:10px 0px;
        }
        .tbData th, td {
            border:solid 1px #ddd;
            padding:5px 8px;
        }
        .tbData th {
            border-bottom:solid 2px #ddd;
            background-color:#eef;
            font-weight:normal;
            color:blue;
        }
        #divData .tbData tr:hover {
            background-color:#fef;
        }    /*分页样式*/
        #divPage {
            text-align:left;
            margin:10px 0px;
            height:30px;
            font-size:12px;
        }   
        #divPage a, #divPage span {
            text-decoration:none;
            color:Blue;
            background-color:White;
            padding:3px 5px;
            font-family:Consolas;
            text-align:center;
            border:solid 1px #ddd;
            display:inline-block;
        }   
        #divPage span {
            color:gray;
        }       
        #divPage a:hover {
            color:Red;
        }
        #divPage .aCur {
            background-color:green;
            color:White;
            font-weight:bold;
        }
        </style>
    <script type="text/javascript">
    $(function(){
        //存入点击列的每一个TD的内容;
        var aTdCont = [];
        //点击列的索引值
        var thi = 0
        
        //重新对TR进行排序
        var setTrIndex = function(tdIndex){
            for(i=0;i<aTdCont.length;i++){
                var trCont = aTdCont[i];
                $("tbody tr").each(function() {
                    var thisText = $(this).children("td:eq("+tdIndex+")").text();
                    if(thisText == trCont){
                        $("tbody").append($(this));
                    }
                });     
            }
        }
        
        //比较函数的参数函数
        var compare_down = function(a,b){
                return a-b;
        }
        
        var compare_up = function(a,b){
                return b-a;
        }
        
        //比较函数
        var fSort = function(compare){
            aTdCont.sort(compare);
        }
        
        //取出TD的值,并存入数组,取出前二个TD值;
        var fSetTdCont = function(thIndex){
                $("tbody tr").each(function() {
                    var tdCont = $(this).children("td:eq("+thIndex+")").text();
                    aTdCont.push(tdCont);
                });
        }
        //点击时需要执行的函数
        var clickFun = function(thindex){
            aTdCont = [];
            //获取点击当前列的索引值
            var nThCount = thindex;
            //调用sortTh函数 取出要比较的数据
            fSetTdCont(nThCount);
        }
        
        //点击事件绑定函数
        $("th").toggle(function(){
            thi= $(this).index();
            clickFun(thi);
            //调用比较函数,降序
            fSort(compare_up);
            //重新排序行
            setTrIndex(thi);
        },function(){
            clickFun(thi);
            //调用比较函数 升序
            fSort(compare_down);
            //重新排序行
            setTrIndex(thi);
        });
    });
    </script>
       <script type="text/javascript">
        //js表格 生成表格代码
        //arrTh 表头信息
        //arrTr 数据
        var getTable = function(arrTh, arrTr){
            var s = '<table class="tabSort" class="tbData">';
            s += '<thead><tr>';
            for(var i=0; i<arrTh.length; i++) {
                s += '<th scope="col">' + arrTh[i] + '</th>';
            }
            s += '</tr></thead>';
            for(var i=0; i<arrTr.length; i++) {
                s += '<tbody><tr>';
                for(var j=0; j<arrTr[i].length; j++) {
                    s += '<td>' + arrTr[i][j] + '</td>';
                }
                s += '</tr></tbody>';
            }
            s += '</table>';
            return s;
        }    //js分页
        //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数
        var jsPage = function(el, count, pageStep, pageNum, fnGo) {
            this.getLink = function(fnGo, index, pageNum, text) {
                var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ');" ';
                if(index == pageNum) {
                    s += 'class="aCur" ';
                }
                text = text || index;
                s += '>' + text + '</a> ';          
                return s;
            }
            
            //总页数
            var pageNumAll = Math.ceil(count / pageStep);
            if (pageNumAll == 1) {
                divPage.innerHTML = '';
                return;
            }
            var itemNum = 5; //当前页左右两边显示个数
            pageNum = Math.max(pageNum, 1);
            pageNum = Math.min(pageNum, pageNumAll);
            var s = '';
            if (pageNum > 1) {
                s += this.getLink(fnGo, pageNum-1, pageNum, '上一页');
            } else {
                s += '<span>上一页</span> ';
            }
            var begin = 1;
            if (pageNum - itemNum > 1) {
                s += this.getLink(fnGo, 1, pageNum) + '... ';
                begin = pageNum - itemNum;
            }
            var end = Math.min(pageNumAll, begin + itemNum*2);
            if(end == pageNumAll - 1){
                end = pageNumAll;
            }
            for (var i = begin; i <= end; i++) {
                s += this.getLink(fnGo, i, pageNum);
            }
            if (end < pageNumAll) {
                s += '... ' + this.getLink(fnGo, pageNumAll, pageNum);
            }
            if (pageNum < pageNumAll) {
                s += this.getLink(fnGo, pageNum+1, pageNum, '下一页');
            } else {
                s += '<span>下一页</span> ';
            }
            var divPage = document.getElementById(el);
            divPage.innerHTML = s;
        }    //js随机内容
        var jsRand = {};
        //随机数字
        jsRand.int = function(min,max){
            var Number = Math.floor(Math.random() * (max-min))+min;
            return Number;
        }    //随机生成3个字母
        jsRand.getPass = function(len){
            var tmpCh = "";
            for(var i = 0;i<len; i++){
                tmpCh +=String.fromCharCode(Math.floor(Math.random()*26)+"a".charCodeAt(0));
            }
            return tmpCh;
        }
        //求和
        jsRand.sum=function(s1,s2,s3,s4,s5,s6,s7,s8){
        var sum;
        sum = s1+s2+s3+s4+s5+s6+s7+s8;
        return sum;
    }
        </script>
    </head>
    <body>
    <h1 style="color:blue">前端练习</h1>
    <div id="divData" style="font-family:Consolas;"></div>
    <div id="divPage"></div>
    <script type="text/javascript">
        function goPage(pageIndex) {
            var arrTh = ['姓名','语文','英语','数学','物理','化学','政治','历史','地理','总分'];
            var arrTr = [];
            for(var i=0; i<15; i++)
            {
                arrTr.push([
                    jsRand.getPass(3), 
                    s1=jsRand.int(1, 100), 
                    s2=jsRand.int(1, 100),  
                    s3=jsRand.int(1, 100), 
                    s4=jsRand.int(1, 100), 
                    s5=jsRand.int(1, 100),
                    s6=jsRand.int(1, 100),
                    s7=jsRand.int(1, 100),
                    s8=jsRand.int(1, 100),
                    jsRand.sum(s1,s2,s3,s4,s5,s6,s7,s8)
                ]);
            }
            document.getElementById('divData').innerHTML = getTable(arrTh, arrTr);
            jsPage('divPage', 300, 15, pageIndex, 'goPage');
        }
        goPage(1);
    </script>
     </body>
    </html>