Tìm kiếm dữ liệu JQuery trong đầu vào và chọn

Question

Sử dụng Jquery Datatables với đầu vào và lựa chọn như được hiển thị ở đây: http://datatables.net/examples/api/form.html hoặc nếu tôi sử dụng trình xử lý hiển thị cột tùy chỉnh để tạo đầu vào và chọn cách tôi có thể thực hiện tìm kiếm bảng toàn cục?

Nếu bạn xem ví dụ, bạn sẽ nhận thấy rằng chỉ cột đầu tiên, cột chỉ đọc, được bao gồm trong tìm kiếm, tôi có thể làm gì để bao gồm các cột khác trong tìm kiếm?

Nếu bạn xem ví dụ trong liên kết trong câu hỏi của tôi và nhập "Tokyo" vào tìm kiếm, tất cả các hàng sẽ được trả lại. Điều này là do "Tokyo" là một tùy chọn trong tất cả các trình đơn thả xuống. Tôi chỉ muốn những hàng có Tokyo được chọn để trưng bày. Nếu bạn nhập "33", bạn sẽ không thấy hàng nào mặc dù hàng đầu tiên có giá trị "33" trong cột đầu tiên.

Tôi dường như không tìm thấy bất kỳ tài liệu nào về cách xác định giá trị tìm kiếm dành cho một ô cụ thể trong một dữ liệu có thể định.

Answer 1

Điều này sẽ tìm kiếm toàn bộ bảng thay vì (các) cột cụ thể.

var table = $('#table').DataTable(); 

$('#input').on('keyup', function() { 
    table.search(this.val).draw(); 
}); 

Answer 2

Tài liệu này không được tài liệu lắm. Và nó có vẻ hoạt động khác nhau, hoặc không hoạt động chút nào, giữa các phiên bản (phụ). Tôi nghĩ dataTables được thiết kế để tự động phát hiện các cột HTML, nhưng vì một lý do nào đó, phần lớn thời gian, nó không có. Cách an toàn nhất là để tạo ra riêng tìm kiếm bộ lọc của bạn:

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) { 
    return $(value).val(); 
}; 

này sẽ trở lại trên <input> 's với giá trị 33, và Tokyo trên <select>' s nơi Tokyo được chọn. Sau đó xác định các cột mong muốn theo loại html-input;

var table = $("#example").DataTable({ 
    columnDefs: [ 
     { "type": "html-input", "targets": [1, 2, 3] } 
    ] 
}); 

xem demo dựa trên http://datatables.net/examples/api/form.html ->http://jsfiddle.net/a3o3yqkw/

---

Về dữ liệu trực tiếp: Vấn đề là, rằng loại chỉ dựa lọc được gọi là lần. dataTables sau đó lưu trữ các giá trị trả về để nó không cần phải "tính toán" tất cả các giá trị hơn và hơn. May mắn thay, dataTables 1.10.x có chức năng tích hợp cho cells, rows và pages được gọi là invalidate buộc dữ liệuĐể đặt lại bộ nhớ cache cho các mục đã chọn.

Tuy nhiên, khi giao dịch với <input> cũng có sự cố, việc chỉnh sửa giá trị không thay đổi thuộc tính value. Vì vậy, ngay cả khi bạn gọi invalidate(), bạn vẫn sẽ kết thúc trong việc lọc trên giá trị "được mã hóa" cũ.

Nhưng tôi đã tìm thấy giải pháp cho việc này.Buộc <input> 's value thuộc tính phải được thay đổi với <input>' giá trị của hiện tại (giá trị mới) và sau đó gọi invalidate:

$("#example td input").on('change', function() { 
    var $td = $(this).closest('td'); 
    $td.find('input').attr('value', this.value); 
    table.cell($td).invalidate(); 
}); 

Đối textareas sử dụng text() thay vì:

$("#example td textarea").on('change', function() { 
    var $td = $(this).closest('td'); 
    $td.find('textarea').text(this.value); 
    table.cell($td).invalidate(); 
}); 

này cũng là trường hợp khi giao dịch với <select>. Bạn sẽ cần phải cập nhật các thuộc tính selected cho phù hợp <option> 's và sau đó invalidate() trong tế bào như:

$("#example td select").on('change', function() { 
    var $td = $(this).closest('td'); 
    var value = this.value; 
    $td.find('option').each(function(i, o) { 
    $(o).removeAttr('selected'); 
    if ($(o).val() == value) $(o).attr('selected', true); 
    }) 
    table.cell($td).invalidate(); 
}); 

forked fiddle ->http://jsfiddle.net/s2gbafuz/ Hãy thử thay đổi nội dung của đầu vào và/hoặc các Dropdowns, và tìm kiếm cho các giá trị mới ...

Answer 3

điều tốt nhất để làm ở đây chỉ là cập nhật container di động với giá trị mới từ đầu vào và giữ cho đồng bộ hóa dữ liệu đối tượng DataTable với giao diện người dùng đầu vào:

$("#pagesTable td input,#pagesTable td select").on('change', function() { 
    var td = $(this).closest("td"); 
    dataTable.api().cell(td).data(this.value); 
}); 

Answer 4

Thay thế bạn nhập bằng Textarea và thêm css bên dưới. Nó sẽ làm cho textarea của bạn trông giống như một đầu vào.

textarea{ 
    height: 30px !important; 
    padding: 2px; 
    overflow: hidden; 
}