創建jquery插件：每個選擇器只運行一次

Question

我試圖創建一個適合我需求的插件，它爲表添加了一些功能。當然有成千上萬的插件，比如dataTables.js等等，但是一個輕量級的解決方案更適合我所要做的。

問題：如果有兩個或更多的表，代碼會在每個表上運行多次，當然如果您過濾一個表，爲一個表分頁並更改每個表的頁面...它適用於所有。

任何幫助將不勝感激，如果你有改進的想法，他們歡迎！一旦我完成了，我會發布在github上，如果有人對簡單版本的數據表感興趣...！

https://jsfiddle.net/ygery/gm02mvpk/

function tableOptions(selector, paginate, npages, filter, responsive) { 

    var $table = $(selector); 
    var currentPage = 0; 

    function tablePaginate() { 
    $table.bind('paginate', { 
     pages: npages 
    }, function(event) { 
     $('.pagination').remove(); 
     // if(npages !=) 
     //alert(event.data.pages); 
     var $row = $table.find('tbody tr:not(.hidden)').addClass('row-pagination'); 
     $row.hide() 
     $row.slice(currentPage * npages, (currentPage + 1) * npages).show(); 
     var numRows = $table.find('.row-pagination').length; 

     var numPages = Math.ceil(numRows/npages); 
     var $pager = $('<ul class="pagination"></ul>'); 

     $('<li class="table-prev"></li>').html('<a href="#"><</a>').bind('click', { 
     prevPage: currentPage - 1 
     }, function(event) { 
     if (currentPage != 0) { 
      currentPage = event.data['prevPage']; 
      $table.trigger('paginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
      $(this).hide(); 
     } 

     }).appendTo($pager).addClass('clickable'); 

     for (var page = 0; page < numPages; page++) { 
     $('<li class="table-page" data-page=' + parseInt(page + 1) + '></li>').html('<a href="#">' + parseInt(page + 1) + '</a>').bind('click', { 
      newPage: page 
     }, function(event) { 

      currentPage = event.data['newPage']; 
      //$table.trigger('paginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
     }).appendTo($pager).addClass('clickable'); 
     } 

     $('<li class="table-next"></li>').html('<a href="#">></a>').bind('click', { 
     nextPage: currentPage + 1 
     }, function(event) { 
     if (currentPage != numPages - 1) { 
      currentPage = event.data['nextPage']; 
      //$table.trigger('paginate'); 
      $(this).addClass('active').siblings().removeClass('active'); 
     } 

     }).appendTo($pager).addClass('clickable'); 


     $pager.insertAfter($table); 
     if (currentPage == 0) { 
     $('.table-prev').addClass('disabled').attr('onclick', 'event.preventDefault();'); 
     } 
     if (currentPage == numPages - 1) { 
     $('.table-next').addClass('disabled').attr('onclick', 'event.preventDefault();'); 
     } 
     $('li[data-page="' + parseInt(currentPage + 1) + '"]').addClass('active'); 

     if (numPages > 5) { 
     var $this = parseInt(currentPage + 1); 
     $('.table-page').hide(); 
     if (currentPage == 0) { 
      currentPage = currentPage + 1; 
     } 
     for (var page = currentPage; page < currentPage + 2; page++) { 
      $('.table-page[data-page="' + parseInt(page + 1) + '"]').show(); 
      if (page == currentPage + 1) { 
      var dots = '<li class="disabled" onclick="event.preventDefault();"><a href="#">...</a></li>'; 
      $('.table-page[data-page="' + parseInt(page + 1) + '"]').after(dots); 
      } 
     } 
     for (var page = currentPage; page > currentPage - 1; page--) { 
      $('.table-page[data-page="' + parseInt(page) + '"]').show(); 
      //if(page == currentPage+1) { 
      // var dots = '<li class="disabled" onclick="event.preventDefault();"><a href="#">...</a></li>'; 
      // $('.table-page[data-page="'+parseInt(page - 1)+'"]').after(dots); 
      //} 
     } 
     } 

    }); 
    $table.trigger('paginate'); 
    } 

    function tableFilter() { 
    $(".table-search").keyup(function() { 
     $('li[data-page="1"]').click(); 
     var input = $(this); 
     var $row = $table.find('tbody tr'); 
     var $cell = $row.find('td'); 

     if (input.val() != '') { 
     $row.addClass('hidden').removeClass('row-pagination'); 
     $($cell).each(function(i, obj) { 
      if ($(obj).find('input').length) { 
      var $content = $(obj).find('input').val().toLowerCase().indexOf(input.val().toLowerCase()); 
      } else { 
      if ($(obj).find('select').length) { 
       var $content = $(obj).find('select option:selected').text().toLowerCase().indexOf(input.val().toLowerCase()); 
      } else { 
       if ($(obj).text().length) { 
       var $content = $(obj).text().toLowerCase().indexOf(input.val().toLowerCase()); 
       } else { 
       var $content = $(obj).html().toLowerCase().indexOf(input.val().toLowerCase()); 
       } 
      } 

      } 
      if ($content > -1 && input.val()) { 
      $(obj).parent().removeClass('hidden'); 
      $(obj).parent().addClass('row-pagination'); 
      } 
     }); 
     $table.trigger('paginate'); 

     } else { 
     $table.find('tr').removeClass('hidden').addClass('row-pagination'); 
     $table.trigger('paginate'); 
     } 

    }); 
    } 

    function tableResponsive() { 
    $(window).resize(function() { 
     if ($(window).width() < 767) { 
     if (!$('.responsive-toggle').length) { 
      $table.find('thead tr th:first-child').before('<td class="responsive-toggle"><i class="glyphicon glyphicon-phone"></i></td>'); 
      $table.find('tbody tr td:first-child').before('<td class="responsive-toggle"><i class="glyphicon glyphicon-menu-down"></i></td>'); 

     } 
     var max = $table.width(); 
     //alert(max); 
     } else { 
     $('.responsive-toggle').remove(); 
     } 
    }).resize(); 


    } 

    $table.each(function() { 
    if (paginate || filter) { 
     var $header = '<div class="col-sm-2 table-pagination-select"></div><div class="col-sm-6 table-options"></div><div class="col-sm-4 table-search-input"></div><hr />'; 
     $table.before($header); 
     $table.wrap('<div class="col-md-12"></div>'); 
    } 
    if (paginate) { 
     var $target = $('.table-pagination-select'); 
     var $select = '<select name="" id="" class="form-control table-select"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="all">Tous</option></select>'; 
     $($select).appendTo($target); 
     //$('.table-select').select2(); 
     tablePaginate(); 
    } 
    if (filter) { 
     var $target = $('.table-search-input'); 
     var $searcher = '<input type="text" class="form-control table-search" placeholder="Rechercher..." />'; 
     $($searcher).appendTo($target); 
     tableFilter(); 
    } 
    if (responsive) { 
     tableResponsive(); 
    } 



    }) 

} 

tableOptions('.table', true, 10, true, true); 

Answer 1

可以jQuery對象上設置的數據：

function tableOptions(selector, paginate, npages, filter, responsive) { 

    var $table = $(selector); 
    if ($table.data('table')) { 
    return; 
    } else { 
    $table.data('table', true); 
    }