jQuery插件/庫來簡化代碼

https://jsfiddle.net/51Le6o06/48/jQuery插件/庫來簡化代碼

請看看代碼也越來越複雜的，我的功能無法正常工作的jsfiddle。

任何人都可以告訴我什麼我可以使用，而不是標準的jQuery和JavaScript，使這更容易建立（與顯示更多的風格分頁方法）。

我需要排序，篩選和頁面現有的HTML，如在jsfiddle。

謝謝。

$(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();

來源

2016-05-13 Scott

當涉及到具有所有過濾器，排序，分頁功能以及更多功能的表格時，最好的解決方案是唯一的解決方案。

jQuery Datatables

只是檢查出的鏈接，很容易和高度可定製。

來源

2016-05-13 09:01:00

我檢查出來，但它似乎並不具有更多的顯示分頁樣式或不是嗎？ – Scott

是的，沒有多顯示/顯示較少的功能，但可以通過對數據表中現有選項的輕微修改來實現。「簡單」分頁與「下一頁」和「上一頁」按鈕。鏈接：https：//datatables.net/reference/option/pagingType 要將標籤從「下一個」和「上一個」更改爲「顯示更多」和「顯示更少」，可用的方法是。更改「下一步」標籤：https：//datatables.net/reference/option/language.paginate.next 更改「以前的」標籤：https：//datatables.net/reference/option/language.paginate.previous 希望它有幫助！ –

你認爲（在你看來）我會最好的甩掉我當前的代碼，並試圖用數據表建立這張表嗎？ – Scott

也許你可以使用這個jQuery插件DataTables

來源

2016-05-13 09:01:54

jQuery插件/庫來簡化代碼

回答

相關問題