tablesorter分页不适用于动态添加的行

时间:2017-04-06 10:06:33

标签: javascript jquery html paging tablesorter

我在动态添加的行上遇到了tableorter分页问题。 我通过循环数据向表添加行。该表将包含实际场景中的html控件。请帮帮我

 $('table').tablesorter({
    sortList: [
      [0, 1],
      [1, 1],
      [2, 1]
    ],
    theme: 'blue',
    showProcessing: false,
    widthFixed: false,
    widgets: ['zebra']
  }).tablesorterPager({
    container: $('.pager'),
    savePages: false,
    removeRows: true,
    page: 0,
    size: 10,
    output: 'page {page} sur {totalPages} ({totalRows})'
  });

var ERIs = [
{"ShippingLine_Cd":"AAC","SizeType_Cd":"20BU","ERIStatus_Cd":"Active","Shift_Nbr":"1"},
{"ShippingLine_Cd":"ACL","SizeType_Cd":"20BU","ERIStatus_Cd" :"Active","Shift_Nbr":"2"},
{"ShippingLine_Cd":"AMA","SizeType_Cd":"20DR","ERIStatus_Cd" :"Active","Shift_Nbr":"1"},
{"ShippingLine_Cd":"ABC","SizeType_Cd":"20DR","ERIStatus_Cd" :"Pending","Shift_Nbr":"2"},
{"ShippingLine_Cd":"CDE","SizeType_Cd":"20DR","ERIStatus_Cd" :"Pending","Shift_Nbr":"3"},
{"ShippingLine_Cd":"AAC","SizeType_Cd":"20DR","ERIStatus_Cd" :"Active","Shift_Nbr":"1"},
{"ShippingLine_Cd":"CDE","SizeType_Cd":"20BU","ERIStatus_Cd" :"Pending","Shift_Nbr":"1"},
{"ShippingLine_Cd":"EFG","SizeType_Cd":"20BU","ERIStatus_Cd" :"Pending","Shift_Nbr":"1"}
];
var lstSizeType= $.unique(ERIs.map(function (d) {
    return d.SizeType_Cd;}));
var tbody = $('#reservations tbody');                          

var i=0, tr;
if($("#trid1").length <= 0){
tr = $('<tr>').attr("id","trid1");
tr.append($('<td>').html(''));

$.each(lstSizeType, function(i, sizeType){
var lstShift = GetListBySizeType(sizeType);
var lstShiftsunique= $.unique(lstShift.map(function (d) {
    return d.Shift_Nbr;}));

var td = $('<td>').html(sizeType+lstShiftsunique.length).attr("id","td"+sizeType); 
if(lstShift.length>1){
td.attr("colspan",lstShiftsunique.length);
}
tr.append(td);
});
tbody.append(tr);
}


if($("#trid2").length <= 0){
tr = $('<tr>').attr("id","trid2");
tr.append($('<td>').html('Line'));

$.each(lstSizeType, function(j, sizeType){
var lstShifts= GetListBySizeType(sizeType);

var lstShiftsuniq= $.unique(lstShifts.map(function (d) {
    return d.Shift_Nbr;}));

$.each(lstShiftsuniq,function(sft, shift){
$('<td>').html(getGetOrdinal(shift)+' Shift').attr("id","td"+lstShifts[0].SizeType_Cd+shift).appendTo(tr); 
});

});
tbody.append(tr);
}

$.each(ERIs, function(i, ERI){
if($("#tr"+ERI.ShippingLine_Cd).length <= 0){
tr = $('<tr>').attr("id","tr"+ERI.ShippingLine_Cd);

$('<td>').html(ERI.ShippingLine_Cd).attr("id","td"+ERI.ShippingLine_Cd).appendTo(tr); 


$.each(lstSizeType, function(j, sizeType){
var lstShifts= GetListBySizeType(sizeType);

var lstShiftsuniq= $.unique(lstShifts.map(function (d) {
    return d.Shift_Nbr;}));

$.each(lstShiftsuniq,function(sft, shift){
$('<td>').html('').attr("id","td"+lstShifts[0].SizeType_Cd+shift).appendTo(tr); 
});

});


tbody.append(tr);
}
});

$.each(ERIs, function(i, ERI){

var togglectrl = '<b>ABC</b>';

 $("#tr"+ERI.ShippingLine_Cd).find("td#"+"td"+ERI.SizeType_Cd+ERI.Shift_Nbr).html(togglectrl);
}); 
$('.tablesorter').trigger('update');



function GetListBySizeType(sizeType) {
  var i = null;
  var selList = [];
  for (i = 0; ERIs.length > i; i += 1) {
    if (ERIs[i].SizeType_Cd === sizeType) {
      selList.push(ERIs[i]);
    }
  }
  return selList;
};

function findOrRemove(array, property, value, del) {
  var recDeleted = false;
  array.forEach(function (result, index) {
    if (result[property] === value) {
      //Remove from array
      if (del)
        array.splice(index, 1);
      recDeleted = true;
    }
  });
  return recDeleted;
};

function getGetOrdinal(n) {
                var s = ["th", "st", "nd", "rd"],
                v = n % 100;
                return n + (s[(v - 20) % 10] || s[v] || s[0]);
            };

请找到samplecode。 请帮帮我。

0 个答案:

没有答案