新しいフィルタ機能を既存のページ設定とマージするjQuery/Javascript

Question

新しいテーブルフィルタリング機能に問題があります。フィルタリングするオファーを選択すると問題が発生します。フィルタリングされた表から見える行だけをフィルタリングして、表を隠したデータです。

さらに、moreをクリックすると、moreをクリックすると、テーブルには現在のフィルタの外にデータが表示され始めます。それは良いことではありません。

また、私のページ分割方法（以下のコード）と組み合わされた「フリーハンドセット」によってフィルタリングするフィルタリング機能もあります。

「フリーハンドセット」フィルタ（チェックボックスの1つ）とページ分割方法でこのフィルタ（ドロップダウン1）をマージすると、フィルタでフィルタリングするオプションを選択すると、その中のすべてのデータページングによって表示されている可視行だけではありません。

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

上記のフィドルが並んで働いて両方のフィルタリング機能を示していますが、彼らは一緒にうまく機能しません。

上記のjsfiddleのように、ドロップダウンフィルタはHTMLからオプションを収集し、ドロップダウンメニューに表示するので、すべてのオプションがページングによって隠されてフィルタリングされます。

各機能のjQueryとJavascriptがあります。

これはうまく機能しない新しいフィルタです。

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

コードは不必要に複雑です。それを必要なステップに分解してください。あなたの本質的な問題について：また、あなたのデータ構造を改善

function onFilterChange() { 
    filterProducts(); 
    resetPagination(); 
    showNextPage(); 
} 

：一度（完全に私のアプローチを理解するために、次の読み取り）に全力を尽くすあなたのデータソースとしてHTMLを使用している場合

、使用することは、あなたの属性主な目的は、それらを見つけるのを容易にします。あなたのTRSのグループに複数のtbodyタグを使用します。

<tbody freeTv='false' freeHandset='false' cost='200'> 
    <tr> 
     <td>content of product 1</td> 
    </tr> 
    <tr> 
     <td>description of product 1</td> 
    </tr> 
</tbody> 
<tbody freeTv='true' freeHandset='false' cost='300'> 
    <tr> 
     <td>content of product 2</td> 
    </tr> 
    <tr> 
     <td>description of product 2</td> 
    </tr> 
</tbody> 

は、私は、全体の要素を追加/削除する代わりに、私の要素にクラスを追加することを好みます。 nth-css-stylingを使用する予定がある場合、これは混乱を招くことに注意してください。

function filterProducts() { 
    $('tbody').addClass('filtered'); 
    // ... some domain-specific magic here ... 
    $('tbody[freeTv="true"]').removeClass('filtered'); 
} 

は今、あなただけの必要があります。あなたはその偉大な、よくデバッグ方法は、相互作用を追加することを必要といけない場合。フィルタCSS定義のように：あなたは同様の方法で行動することができますページネーションのための

.filtered { display: none; } 

。

function showNextPage() { 
    $('tbody.paged').slice(0, 10).removeClass('paged'); 
} 

https://jsfiddle.net/g9zt0fan/

Answer 2

私が開始することで、問題を自分で解決する：あなたが欲しいもの（最初の10ページングのもの）を示し、その後

function resetPagination() { 
    $('tbody').addClass('paged'); 
    $('tbody.filtered').removeClass('paged'); 
} 

：最初（CSS .paged { display: none; }と再び）すべてを隠しますdatatablesライブラリを使用しています。私はまだそれに取り組んでいますが、コードは扱いがずっと簡単です。

私が直面している唯一の問題は、改ページスタイルを変更することです。

https://jsfiddle.net/6k0bshb6/16/

// This function is for displaying data from HTML "data-child-value" tag in the Child Row. 
function format(value) { 
     return '<div>Hidden Value: ' + value + '</div>'; 
    } 

// Initialization of dataTable and settings. 
    $(document).ready(function() { 
     var dataTable = $('#example').DataTable({ 
     bLengthChange: false, 
     "pageLength": 5, 
     "pagingType": "simple", 
     "order": [[ 7, "asc" ]], 
     "columnDefs": [ 
      { 
       "targets": [ 5 ], 
       "visible": false, 
       "searchable": true 
      }, 
      { 
       "targets": [ 6 ], 
       "visible": false, 
       "searchable": true 
      }, 
      { 
       "targets": [ 7 ], 
       "visible": false, 
       "searchable": true 
      } 
     ], 

// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts. 
     initComplete: function() { 
      this.api().columns(5).every(function() { 
       var column = this; 
       var select = $('<select><option value="">Show all</option></select>') 
        .appendTo($("#control-panel").find("div").eq(1)) 
        .on('change', function() { 
        var val = $.fn.dataTable.util.escapeRegex(
        $(this).val()); 
        column.search(val ? '^' + val + '$' : '', true, false) 
         .draw(); 
       }); 
       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="' + d + '">' + d + '</option>') 
       }); 
      }); 
     } 
    }); 

// This function is for handling Child Rows. 
    $('#example').on('click', 'td.details-control', function() { 
      var tr = $(this).closest('tr'); 
      var row = dataTable.row(tr); 

      if (row.child.isShown()) { 
       // This row is already open - close it 
       row.child.hide(); 
       tr.removeClass('shown'); 
      } else { 
       // Open this row 
       row.child(format(tr.data('child-value'))).show(); 
       tr.addClass('shown'); 
      } 
    }); 

// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only. 
    $('#checkbox-filter').on('change', function() { 
     dataTable.draw(); 
    }); 

    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 
     var target = '£0.00'; 
     var position = data[6]; // use data for the position column 
     if($('#checkbox-filter').is(":checked")) { 
      if (target === position) { 
      return true; 
     } 
     return false; 
     } 
     return true; 
     } 
    ); 
});