jQuery DataTable - Ẩn các hàng theo cách dự định

Question

Chúng tôi hiện đang làm việc trên một CRM dựa trên web. Dự án sẽ tuyệt vời ngoại trừ một vấn đề khó chịu.

chúng tôi đang sử dụng DataTable jQuery plug-in cho hầu hết mọi bảng có thể sắp xếp trong ứng dụng. Dưới đây là danh sách các sự cố hoạt động.

Như bạn thấy, cột thứ ba đại diện cho loại sự cố (vé, thay đổi yêu cầu, yêu cầu dịch vụ, vv)

Người dùng yêu cầu một hộp lọc đặt trên đầu trang của trước để lọc các loại sự cố. Ví dụ: nếu bạn chọn "Chỉ vé", mọi loại khác sẽ bị ẩn. Cho đến bây giờ, mọi thứ đều hoạt động.

Để làm như vậy, mỗi hàng có lớp CSS đại diện cho loại sự cố.

• Row # 1: class = "tấm vé"
• Row # 2: class = "changeRequest"

Khi thay đổi giá trị hộp lọc, sau mã javascript được thực hiện

$('table.sortable').each(function() { 
    for (var i = 0; i < rows.length; i++) { 
     if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide(); 
    } 
}); 

nơi

• vClass = CS Lớp S đại diện cho loại sự cố
• hàng = Tất cả các hàng dữ liệu, nhận từ "$ (SomeDatatable) .dataTable(). FnGetNodes();"
• $ ('table.sortable') = Tất cả DataTables

Bây giờ, buộc chặt dây an toàn của bạn (liner tiếng Pháp). Khi bạn ẩn hoàn toàn một hàng, dataTable vẫn tính nó. Đây là kết quả tuyệt vời.

Điều đó đang được giải thích, có đi các câu hỏi chính: Làm sao tôi phải nói với DataTable mà tôi muốn giấu hàng mà không xóa chúng mãi mãi? DataTable đã có một hộp lọc nhưng tôi cần nó hoạt động độc lập cùng với hộp lọc kiểu (không phải trong hình ảnh).

Có cách nào để thêm bộ lọc thứ hai không?

Answer 1

Bạn cần phải viết một bộ lọc tùy chỉnh cho bảng đó. Ví dụ:

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) { 
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) { 
     return aData[16] == '' || $('#chkShowExcluded').is(':checked'); 
    } else return true; 
}); 

Trong ví dụ đó, chúng tôi sẽ tự động thêm và loại bỏ lớp 'không loại trừ' vào bảng, nó sẽ kiểm tra mỗi hàng để xem một ô cụ thể có giá trị hay không .Logic có thể là bất cứ thứ gì bạn có thể mơ ước, chỉ cần giữ nó nhanh (điều này được thực hiện cho mỗi hàng, trên mỗi bản vẽ, cho mỗi bảng trên trang (lưu ý nó được thêm vào mảng 'toàn cầu' trong DT, chứ không phải một cá thể)

Return true để chứa thêm hàng, trở false để che giấu hàng

đây là tài liệu tham khảo DataTable sử dụng các khả năng afnFiltering: http://datatables.net/development/filtering

lợi thế này thay vì sử dụng .fnFilter() là điều này các công trình dọc WITH, vì vậy người dùng vẫn có thể sử dụng hộp lọc ở trên cùng bên phải (theo mặc định, tôi thấy máy của bạn ở dưới cùng bên phải) để tiếp tục ilter kết quả bạn chọn để hiển thị chúng. Nói cách khác, giả sử bạn ẩn tất cả các mục 'đã hoàn thành', vì vậy người dùng chỉ nhìn thấy các mục 'không đầy đủ' trong bảng. Sau đó, họ vẫn có thể lọc bảng cho 'máy tính xách tay' và chỉ xem các hàng có BOTH không đầy đủ và có 'máy tính xách tay' trong mô tả của họ

Answer 2

DataTables cung cấp này ra khỏi hộp: DataTables individual column filtering example hoặc tốt hơn nữa DataTables individual column filtering example (using select menus)

Answer 3

Tôi không thể giúp phần dữ liệu như tôi chưa từng sử dụng, nhưng bạn có thể cải thiện javascript mà bạn chạy khi hộp bộ lọc thay đổi thành:

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show'); 
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show'); 

với kiểu css thích hợp. Hoặc bạn có thể làm:

$('.table-sortable').find('tr.' + vClass).show(); 
$('.table-sortable').find('tr:not(.' + vClass + ')').hide(); 

Nếu bạn thử một trong các cách tiếp cận này, bạn có thể gặp may và phá vỡ vấn đề có thể định, nhưng tôi tin rằng mã của bạn sẽ hiệu quả hơn.