本功能针对表格实现分页
需要引用jquery及其插件jqurey.dragsort
处理器参见: 在服务器端实现数据任意排序算法
先看一下示例代码:
1 $('table.list').tableDragsort({ 2 handler:'/user/sort', //排序处理器 3 selector:'.moveable', //拖放对象选择器 4 data:{} //附加参数 5 page:2, //当前页号 6 pageCount:3 //分页总数 7 });
源代码:
1 $.fn.tableDragsort = function(setting) 2 { 3 setting = $.extend({handler:'', selector:'tr', data:{}}, setting); 4 if($(this).find('tbody tr').length > 1 || $(this).find('tbody tr').length == 1 && setting.page > 1){ 5 var t = $(this); 6 var cs = $(this).find('tbody tr:first td').length; 7 if(setting.page > 1){ 8 t.prepend('<tr class="prev"><td colspan="' + cs + '" style="color:#ccc">移到上一页</td></tr>'); 9 } 10 if(setting.page < setting.pageCount){ 11 t.append('<tr class="next"><td colspan="' + cs + '" style="color:#ccc">移到下一页</td></tr>'); 12 } 13 var ref = function(){ 14 t.find("tbody tr").each(function(i){$(this).attr('index', i)}); 15 t.find('.prev').attr('id', '-'+t.find('.prev').next().attr('id')); 16 t.find('.next').attr('id', '+'+t.find('.next').prev().attr('id')); 17 } 18 ref(); 19 $(this).dragsort({ 20 dragSelector: setting.selector, 21 dragBetween: false, 22 placeHolderTemplate: '<tr><td colspan="' + cs + '"> </td></tr>', 23 itemSelector: 'tr[index]', 24 dragEnd: function () { 25 var o = $(this); 26 var id = o.attr('id'); 27 var i = parseInt(o.attr('index')); 28 var target_id = 0; 29 if (parseInt(o.next().attr('index')) < i) { 30 target_id = o.next().attr("id"); 31 }else if(parseInt(o.prev().attr('index')) > i) { 32 target_id = o.prev().attr("id"); 33 } 34 t.find('.next,.prev').hide(); 35 $.post(setting.handler, $.extend(setting.data,{ 36 id: id, 37 target_id: target_id 38 }), function (r) { 39 if (r.status === 1) { 40 var flag = target_id.substr(0, 1); 41 if(flag == '+'){ 42 goto(setting.page + 1); 43 }else if(flag == '-') { 44 goto(setting.page - 1); 45 }else{ 46 ref(); 47 } 48 } else { 49 artDialog.alert(r.info); 50 i = i - 1; 51 if(i > -1) 52 o.insertAfter(o.parent().find('tr[index="' + i + '"]')); 53 else 54 o.prependTo(o.parent()); 55 } 56 }); 57 } 58 }).find('tr[index] '+ setting.selector).bind('mousedown', function(){ 59 t.find('.next,.prev').show(); 60 }).bind('mouseup', function(){ 61 t.find('.next,.prev').hide(); 62 }).trigger('mouseup'); 63 } 64 return $(this); 65 }