jQueryプラグイン/ライブラリコード

Question

https://jsfiddle.net/51Le6o06/48/

を簡素化するためのコードが複雑になっていると、私の機能が正しく動作していないjsfiddleをご覧ください。

標準のjQueryとjavascriptの代わりに、これをもっと簡単に（もっと多くのスタイルのページ区切り方法で）ビルドするために何が使えるか教えてもらえますか？

jsfiddleのように、既存のHTMLを並べ替え、フィルタリングしてページする必要があります。

ありがとうございました。

$(document).ready(function() { 
    $('.filter-gift').each(filterItems); 
}); 

function filterItems(e) { 
    var items = []; 
    var table = ''; 
    tableId = $(this).parent().parent().attr('tag') 

     var listItems = ""; 
     listItems += "<option value=''> -Select- </option>"; 
     $('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) { 
      var itm = $(this)[0].innerText; 
      if ($.inArray(itm, items) == -1) { 
       items.push($(this)[0].innerText); 
       listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>"; 
      } 
     }); 

    $('div[tag="' + tableId+ '"] .filter-gift').html(listItems); 

    $('.filter-gift').change(function() { 
    if($(this).val()!= "") { 
     var tableIdC = $(this).parent().parent().attr('tag'); 

     var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");; 
      $('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) { 
       if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) { 
        $(this).show(); 
        $(this).prev().show(); 
        $(this).next().show(); 
       } 
       else { 
        $(this).hide(); 
        $(this).prev().hide(); 
        $(this).next().hide(); 
       } 
      }); 
      } else { 
      $(this).parent().parent().find('table tr').show(); 
      } 
     });  
} 


jQuery.fn.sortPaging = function(options) { 
    var defaults = { 
     pageRows: 2 
    }; 
    var settings = $.extend(true, defaults, options); 
    return this.each(function() { 

     var container = $(this); 
     var tableBody = container.find('.internalActivities > tbody'); 
     var dataRows = []; 
     var currentPage = 1; 
     var maxPages = 1; 
     var buttonMore = container.find('.seeMoreRecords'); 
     var buttonLess = container.find('.seeLessRecords'); 
     var buttonFree = container.find('.filter-free'); 
     var tableRows = []; 
     var maxFree = 0; 
     var filterFree = buttonFree.is(':checked'); 
     function displayRows() { 
      tableBody.empty(); 
      var displayed = 0; 
      $.each(dataRows, function(i, ele) { 
       if(!filterFree || (filterFree && ele.isFree)) { 
        tableBody.append(ele.thisRow).append(ele.nextRow); 
        displayed++; 
        if(displayed >= currentPage*settings.pageRows) { 
         return false; 
        }; 
       }; 
      }); 
     }; 
     function checkButtons() { 
      buttonLess.toggleClass('element_invisible', currentPage<=1); 
      buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages); 
     }; 
     function showMore() { 
      currentPage++; 
      displayRows(); 
      checkButtons(); 
     }; 
     function showLess() { 
      currentPage--; 
      displayRows(); 
      checkButtons(); 
     }; 
     function changedFree() { 
      filterFree = buttonFree.is(':checked'); 
      if(filterFree && currentPage>maxFreePages) { 
       currentPage=maxFreePages; 
      }; 
      displayRows(); 
      checkButtons(); 
     }; 

     tableBody.find('.product-data-row').each(function(i, j) { 
      var thisRow = $(this); 
      var nextRow = thisRow.next(); 
      var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, '')); 
      var isFree = thisRow.find('.free').length; 
      maxFree += isFree; 
      dataRows.push({ 
       amount: amount, 
       thisRow: thisRow, 
       nextRow: nextRow, 
       isFree: isFree 
      }); 
     }) 

     dataRows.sort(function(a, b) { 
      return a.amount - b.amount; 
     }); 
     maxPages = Math.ceil(dataRows.length/settings.pageRows); 
     maxFreePages = Math.ceil(maxFree/settings.pageRows); 

     tableRows = tableBody.find("tr"); 

     buttonMore.on('click', showMore); 
     buttonLess.on('click', showLess); 
     buttonFree.on('change', changedFree); 

     displayRows(); 
     checkButtons(); 

    }) 

}; 

$('.sort_paging').sortPaging(); 

Answer 1

すべてのフィルタ、ソート、ページ機能などを備えたテーブルに最適なソリューションは1つだけです。

jQuery Datatables

ちょうどそれが簡単かつ高度にカスタマイズ可能ですが、リンクをチェックしてください。

Answer 2

はたぶん、あなたは、私はそれをチェックアウトし、このjQueryのプラグインDataTables