2

嗨,我是网页开发人员的新手,我需要在单击表格标题时按日期和字母对表格进行排序

在此处输入图像描述

这是我的表....表中的数据是使用 ajax 动态生成的....

我的需要是

  • 单击日期标题时,它应该根据日期排序
  • 单击通知标题时,应按字母排序

请对此提出一些想法或建议.......

4

5 回答 5

4

我使用 jQuery 库做了示例,并将其添加到http://jsfiddle.net/bURg4/2/

jQuery 选择器返回的是数组对象,它具有原生数组sort函数。

$('table tbody tr').sort( function( a , b ) {

     // do compare here
});

希望这会有所帮助..

将以下代码复制并粘贴到文件中..将其重命名为test.html

<html>
    <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th data-key="id" data-column="0" data-order="asc">id</th>
                    <th data-key="date" data-column="1" data-order="asc">date</th>
                    <th data-key="notify" data-column="2" data-order="asc">notify</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>31-03-2013 06:12:57 PM</td>
                    <td>gold</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>31-03-2013 06:14:57 PM</td>
                    <td>diamond</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>31-03-2013 06:10:57 PM</td>
                    <td>silver</td>
                </tr>
            </tbody>
        </table>    
        <script type="text/javascript">

            function getDate( str ) {

                var ar =  /(\d{2})-(\d{2})-(\d{4}) (\d{2}):(\d{2}):(\d{2}) ([AM|PM]+)/ 
                     .exec( str ) 

                return new Date(
                    (+ar[3]),
                    (+ar[2])-1, // Careful, month starts at 0!
                    (+ar[1]),
                    (+ar[4])+ ( ar[7]=='PM'? 12 :0 ),
                    (+ar[5]),
                    (+ar[6])
                );
            };

            $( function(){


                var sorter = {

                    order   : [1,-1],
                    column  : 0 ,
                    key     :'id' ,

                    setOrder : function( k ){

                        this.order  = ({ 
                            asc :[1,-1], desc:[-1,1] 
                        })[k] || this.order ;

                        return this;
                    },
                    setColumn : function( c ){

                        this.column  = c || this.column ;
                        return this;
                    },

                    setKey : function( k ) {
                        this.key  = k || this.key;
                        return this;
                    },

                    sort : function( els ) {

                        var sortFunc = this.key;

                        return els.sort( this[ sortFunc ]);        
                    },

                    getValue : function( a, b ){

                        return {
                            a : $(a).find('td:eq('+ sorter.column +')').text(),
                            b : $(b).find('td:eq('+ sorter.column+')').text()
                        }
                    },
                    comp : function( val ) {

                            if ( val.a == val.b ) {
                                return 0;
                            }

                            return  val.a > val.b ? 
                                    sorter.order[0]:sorter.order[1] ; 

                    },
                    id : function( a , b ){

                            var val = sorter.getValue(a,b);

                            val.a = parseInt( val.a , 10 );
                            val.b = parseInt( val.b , 10 );

                            return sorter.comp( val );        

                    },

                    notify : function( a , b ){

                            var val = sorter.getValue(a,b);
                            return sorter.comp( val );           

                    },
                    date : function( a , b ){

                            var val = sorter.getValue(a,b);

                            val.a = getDate( val.a );
                            val.b = getDate( val.b );

                            return sorter.comp( val ); 

                    }
                }

                $('table thead').on('click', 'th', function(){

                        var sorted = sorter.setOrder( $(this).attr('data-order') )
                                           .setColumn( $(this).attr('data-column') )
                                           .setKey( $(this).attr('data-key') )
                                           .sort(  $('table tbody tr') );


                        $('table tbody').empty().append( sorted );  

                        $('table thead th').not( this )
                                           .attr('data-order' ,'asc');

                        $(this).attr(
                            'data-order',  
                            ( $(this).attr('data-order') == 'asc' ? 'desc' :'asc') 
                        );

                });
            });
        </script>

    </body>
</html>   
于 2013-03-25T09:47:55.397 回答
2

我会使用一个小的 jquery 插件。

我已经尝试过http://www.datatables.net/但认为它对于我的需要来说太大了,比你的要大一点,所以我建议http://tablesorter.com/docs/非常适合你的规范。

你会在他们的网站上找到演示。

于 2013-03-25T06:39:02.080 回答
2

将相应的值存储在数组中并进行排序

要按日期对数组进行排序,请使用此

array.sort(function(a,b){
var c = new Date(a.date);
var d = new Date(b.date);
return c-d;
});

要按字母对数组进行排序,请使用基本的sort()函数

用于排序日期和时间的现场演示

于 2013-03-25T06:41:38.870 回答
1
function sortAsc(a, b) {
    var aSort = a.Text.toLowerCase(), //Text is the field on which we make sort
        bSort = b.Text.toLowerCase();
    if (aSort === bSort) return 0;
    return aSort < bSort ? 1 : -1;
}
function sortDesc(a, b) {
    var aSort = a.Text.toLowerCase(), //Text is the field on which we make sort
        bSort = b.Text.toLowerCase();
    if (aSort === bSort) return 0;
    return aSort > bSort ? 1 : -1;
}

我使用这两种方法对 Json Obejct 进行排序

称他们为 [jsonObject].sort(sortDesc) or [jsonObject].sort(sortAsc)

于 2013-03-25T06:46:18.757 回答
0

您可以以递增方式为日期列提供 id,即第 1 行 col1 将是 date_1,然后 row2 和 col1 将是 date_2,就像这样,将其应用于两列(notify_1,notify_2,...)。在表单上有一个隐藏字段,包含行数。在此基础上,您可以对其应用一个循环,然后可以在 td 的内部 html 上使用任何排序算法。

于 2013-03-25T06:46:33.680 回答