jquery 动态添加排序

var data = [{tag:1},{tag:2},{tag:1}]

var $strs='', $strs2='', $len=data.length

for(var i=0i<$leni++)

{

if(data[i])

{   

if(data[i]['tag']==2){

$strs2 += "<li class='date_m:last'>pddd</li>"   

}else{

$strs += "<li class='date_m'>pddd</li>"   

}         

}

}

$strs += $strs2

//"<li class='date_m'>pddd</li><li class='date_m'>pddd</li><li class='date_m:last'>pddd</li>"

将tag=2的数据单独存一个变量，最后再拼接到$strs后边。

还有一个方法是先对data数组进行排序，再做循环。

data = data.sort( function(a, b){

    return a.tag - b.tag //按每个数组项下的tag做排序

})

$(document).ready(function()

{

//插件的形式

jQuery.fn.alterRowColors = function()

{

$('tbody tr:odd', this).removeClass('even').addClass('odd')

$('tbody tr:even', this).removeClass('odd').addClass('even')

return this

}

//1.此时的函数是作为jQuery.fn的一个新属性定义的，不是孤立的函数，这样就把该函数注册成了一个插件，

//2.使用关键字this，在一个插件内部，this表示的是调用该插件的jQuery对象，

//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。

var $sortOrder = 0 //排序类型 1表示升序，0表示降序

var $table = $('table#shop')

$table.alterRowColors()

$('th', $table).each(function( column )

{

//处理三种有可能存在的排序字段，比较方法

var findSortKey

if( $(this).is('.sort-title') || $(this).is('.sort-author') )

{

findSortKey = function( $cell )

{

return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase()

}

}

else if( $(this).is('.sort-date') )

{

findSortKey = function( $cell )

{

return Date.parse('1' + $cell.text())

}

}

else if( $(this).is('.sort-price') )

{

findSortKey = function( $cell )

{

var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))

return isNaN(key) ? 0 : key

}

}

//排序

if( findSortKey )

{

$(this).addClass('clickable').hover(function()

{

$(this).addClass('hover')

var $title = $sortOrder == 0 ? '升序' : '降序'

$(this).attr('title', '按'+ $(this).html() + $title +'排列')

}, function()

{

$(this).removeClass('hover')

}).click(function()

{

$sortOrder = $sortOrder == 0 ? 1 : 0

var rows = $table.find('tbody >tr').get()

$.each( rows, function( index, row )

{

row.sortKey = findSortKey($(row).children('td').eq(column))

})

//排序方法

rows.sort(function( a, b )

{

if( $sortOrder == 1 )

{

//升序

if(a.sortKey <b.sortKey) return -1

if(a.sortKey >b.sortKey) return 1

return 0

}

else

{

//降序

if(a.sortKey <b.sortKey) return 1

if(a.sortKey >b.sortKey) return -1

return 0

}

})

//排序后的对象添加给$table

$.each( rows, function( index, row )

{

$table.children('tbody').append(row)

row.sortKey = null

})

//显著标明是通过某一列排序的

$table.find('td').removeClass('sorted')

.filter(':nth-child('+ (column + 1) +')').addClass('sorted')

//重新赋予奇偶行的样式

$table.alterRowColors()

})

}

})

//分页效果

var currentPage = 0 //当前页

var pageSize = 10 //每页行数（不包括表头）

//绑定分页事件

$table.bind('repaginate', function()

{

$table.find('tbody tr').hide()

.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show()

})

var numRows = $table.find('tbody tr').length //记录宗条数

var numPages = Math.ceil(numRows/pageSize) //总页数

var $pager = $('<div class="page"></div>') //分页div

for( var page = 0page <numPagespage++ )

{

//为分页标签加上链接

$('<a href="#" ><span>'+ (page+1) +'</span></a>')

.bind("click", { "newPage": page }, function(event)

{

currentPage = event.data["newPage"]

$table.trigger("repaginate")

})

.appendTo($pager)

$pager.append("  ")

}

$pager.insertAfter($table) //分页div插入table

$table.trigger("repaginate") //初始化

})

---