Excel như bộ lọc trong jquery datatable

Bạn có thể xác định bộ lọc tích hợp trong đầu trang hoặc chân trang của cột. Webix cung cấp nhiều loại bộ lọc khác nhau

• trong một phiên bản miễn phí tiêu chuẩn
  • ;
  • (dựa trên văn bản);
  • ;
  • (dựa trên lựa chọn);
  • ;
  • ;
• ngoài ra, trong phiên bản Webix Pro
  • ;
  • (dựa trên richselect);
  • ;
  • (dựa trên nhiều lựa chọn);
  • ;
  • (dựa trên nhiều tổ hợp);
  • ;
  • ;
  • (dựa trên phạm vi dữ liệu);
  • (dựa trên bộ lọc)

Tất cả chúng được mô tả chi tiết dưới đây

Cài đặt và cấu hình bộ lọc

Đặt bộ lọc

Bộ lọc tích hợp được đặt theo thuộc tính nội dung của thuộc tính đầu trang/chân trang. Lưu ý rằng để thêm bộ lọc vào đầu trang (chân trang), đầu trang (chân trang) phải được chỉ định là một đối tượng hoặc một mảng

columns:[
    { id:"year", header:{ content:"{filtername}Filter" } },
    {
        id:"title",
        header:[
            { content:"{filtername}Filter" },
            "Title"
        ]
    }
]
Nếu bạn cần tạo bộ lọc tùy chỉnh (hoặc một số phần tử tùy chỉnh khác) cho tiêu đề hoặc bạn cần thay đổi cách thức hoạt động của bộ lọc,
Định cấu hình bộ lọc
Chức năng này chỉ khả dụng cho các bộ lọc Pro
Bạn có thể định cấu hình điều khiển được sử dụng trong tiêu đề bảng để lọc (richselect, datepicker, v.v.) bằng thuộc tính inputConfig
Ví dụ: bạn có thể bật tính năng tagMode cho multiComboFilter như sau
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
Nhận tùy chọn cho bộ lọc lựa chọn
Theo mặc định, các tùy chọn cho bộ lọc lựa chọn (selectFilter, richSelectFilter, multiSelectFilter, multiComboFilter và các đối tác máy chủ của chúng) được sử dụng
từ các giá trị cột,
từ bộ sưu tập/tùy chọn cột,
từ bộ sưu tập/tùy chọn của bộ lọc
Bạn có thể đặt bộ sưu tập/tùy chọn theo nhiều cách và bất kể cách thức lưu trữ tùy chọn trong DataCollection
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
Nếu có một bộ sưu tập cho cột, nhưng bạn muốn bộ lọc lấy các tùy chọn của nó từ các giá trị cột, thì bạn có thể thêm một thuộc tính cấu hình bổ sung vào bộ lọc
{
    id:"year", options:data_collection,
    header:[
        "Released", {
            content:"selectFilter", collect:{ visible:true }
        }
    ]
}
Mẫu liên quan.   Có thể lập dữ liệu. Bộ sưu tập tùy chọn cho cột, bộ lọc và trình chỉnh sửa
Mô tả bộ lọc
bộ lọc văn bản
Tìm các bản ghi có chuỗi được nhập vào trường văn bản trong cột này
{ id:"title", header:[ "Film title", { content:"textFilter" } ] }
Mẫu liên quan.   Lọc. Bộ lọc văn bản tích hợp sẵn và bộ lọc chọn lọc
Bộ lọc máy chủ
Bộ lọc văn bản hoạt động với phụ trợ. Lấy văn bản từ trường văn bản và gửi yêu cầu đến máy chủ để trả lại dữ liệu đã lọc
{ id:"title", header:[ "Film title", { content:"serverFilter" } ] }
Mẫu liên quan.   Có thể lập dữ liệu. Sắp xếp và lọc phía máy chủ
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu chúng được đặt;
bắt đầu - ID để bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu chúng được đặt;
bộ lọc [column_name] - tên của cột mà quá trình lọc được thực hiện. Giá trị của nó là văn bản mà người dùng đã nhập vào đầu vào bộ lọc
# find all films with 'the' in the title
data/films?count=50&start=0&filter[title]=the
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Chọn bộ lọc
Dựa trên đầu vào chọn HTML tiêu chuẩn. Tìm bản ghi dữ liệu bằng cách so sánh các giá trị từ cột với tùy chọn đã chọn
{ id:"title", header:[ "Film title",{ content:"selectFilter" } ] }
Mẫu liên quan.   Lọc. Bộ lọc văn bản tích hợp sẵn và bộ lọc chọn lọc
Máy chủChọn bộ lọc
Một bộ lọc chọn hoạt động với phụ trợ. Nhận tùy chọn đã chọn và gửi yêu cầu đến máy chủ để trả lại dữ liệu đã lọc
________số 8_______
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bắt đầu - ID của bản ghi dữ liệu bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bộ lọc [column_name] - tên của cột (trong ngoặc) mà quá trình lọc được thực hiện. Giá trị của nó là tùy chọn được chọn từ danh sách
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
bộ lọc số
Đây là bộ lọc văn bản được sử dụng cho các cột có số. Nó tìm các bản ghi dữ liệu bằng cách so sánh các giá trị từ cột với số hoặc điều kiện đã nhập. Người dùng có thể lọc số bằng toán tử so sánh
'=' - bằng;
'>' - lớn hơn;
'<' - ít hơn;
'<=' - nhỏ hơn hoặc bằng;
'>=' - lớn hơn hoặc bằng
{ id:"year", header:[ "Released", { content:"numberFilter" } ] }
Mẫu liên quan.   Lọc. Bộ lọc số tích hợp sẵn
bộ lọc ngày
Đây là bộ lọc văn bản được sử dụng cho các cột ngày tháng. Nó tìm các bản ghi dữ liệu bằng cách so sánh các ngày từ cột với ngày hoặc điều kiện đã nhập. Người dùng có thể lọc dữ liệu bằng các toán tử so sánh sau



'>' - lớn hơn;
'<' - ít hơn;
'<=' - nhỏ hơn hoặc bằng;
'>=' - lớn hơn hoặc bằng
Có 3 cách bạn có thể nhập ngày vào dateFilter
'yyyy' - năm có 4 chữ số;
'ừm. yyyy' - tháng có 2 chữ số và năm có 4 chữ số cách nhau bằng điểm;
'đ. mm. yyyy' - 2 chữ số ngày, 2 chữ số tháng và 4 chữ số năm cách nhau bởi các điểm
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
0
Mẫu liên quan.   Lọc. Bộ lọc ngày tích hợp sẵn
Bộ lọc Richselect
Chỉ có trong phiên bản Webix Pro
Tìm bản ghi dữ liệu bằng cách so sánh tùy chọn đã chọn với các giá trị từ cột. Dựa trên điều khiển Richselect của Webix
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
1
Mẫu liên quan.   Bộ lọc đa lựa chọn trong DataTable
ServerRichChọn bộ lọc
Chỉ có trong phiên bản Webix Pro
Nhận tùy chọn đã chọn và gửi yêu cầu đến máy chủ để trả lại dữ liệu đã lọc
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
2
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bắt đầu - ID để bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bộ lọc [column_name] - tên của cột (trong ngoặc) mà quá trình lọc được thực hiện. Giá trị của nó là tùy chọn được chọn trong danh sách thả xuống
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Bộ lọc nhiều lựa chọn
Chỉ có trong phiên bản Webix Pro
Người dùng có thể chọn một số tùy chọn từ danh sách thả xuống. Bộ lọc sẽ tìm các bản ghi bằng cách so sánh các giá trị từ cột với các tùy chọn đã chọn. Bộ lọc dựa trên điều khiển đa lựa chọn của Webix
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
3
Mẫu liên quan.   Bộ lọc đa lựa chọn trong DataTable
Bộ lọc đa lựa chọn máy chủ
Chỉ có trong phiên bản Webix Pro
Người dùng có thể chọn một số tùy chọn từ danh sách thả xuống. Bộ lọc nhận các tùy chọn đã chọn và gửi yêu cầu tới máy chủ để trả về dữ liệu đã lọc
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
4
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bắt đầu - ID để bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bộ lọc [column_name] - tên của cột (trong ngoặc) mà quá trình lọc được thực hiện. Giá trị của nó là một chuỗi với các tùy chọn đã chọn
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Bộ lọc đa năng
Chỉ có trong phiên bản Webix Pro
Người dùng có thể nhập văn bản và chọn một số tùy chọn từ danh sách. Bộ lọc lấy các tùy chọn đã chọn và tìm các bản ghi bằng cách so sánh các giá trị từ cột với các tùy chọn đã chọn. Bộ lọc dựa trên điều khiển đa tổ hợp Webix
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
5
Theo mặc định, thuộc tính cấu hình tagMode cho bộ lọc này bị tắt, tôi. e. điều khiển chỉ hiển thị số lượng tùy chọn đã chọn
Bạn có thể bật tagMode cho bộ lọc bên trong thuộc tính của cấu hình tiêu đề
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
6
Máy chủBộ lọc MultiCombo
Chỉ có trong phiên bản Webix Pro
Người dùng có thể nhập văn bản và chọn một số tùy chọn từ danh sách. Bộ lọc nhận các tùy chọn đã chọn và gửi yêu cầu tới máy chủ để trả về dữ liệu đã lọc



{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
7
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bắt đầu - ID để bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bộ lọc [column_name] - tên của cột (trong ngoặc) mà quá trình lọc được thực hiện. Giá trị của nó là một chuỗi với các tùy chọn đã chọn
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Bộ lọc hẹn giờ
Chỉ có trong phiên bản Webix Pro
Người dùng có thể chọn ngày trên datepicker. Bộ lọc lấy ngày đã chọn và tìm bản ghi bằng cách so sánh ngày trong cột này với ngày đã chọn. Bộ lọc dựa trên điều khiển Webix DatePicker
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
8
Mẫu liên quan.   Bộ lọc ngày trong DataTable
Bộ lọc phạm vi ngày
Chỉ có trong phiên bản Webix Pro
Người dùng có thể chọn khoảng thời gian trên daterangepicker. Bộ lọc lấy ngày đã chọn và tìm bản ghi bằng cách so sánh ngày trong cột này với khoảng thời gian đã chọn. Bộ lọc dựa trên điều khiển bộ đếm thời gian của Webix
{
    id:"year",
    header:[
        "Released", {
            content:"multiComboFilter", inputConfig:{ tagMode:true }
        }
    ]
}
9
Mẫu liên quan.   Bộ lọc phạm vi ngày trong DataTable
Bộ lọc phạm vi ngày máy chủ
Chỉ có trong phiên bản Webix Pro
Người dùng có thể chọn khoảng thời gian trên daterangepicker. Bộ lọc lấy ngày đã chọn và gửi yêu cầu đến máy chủ để trả về dữ liệu đã lọc
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
0
Thông số yêu cầu là
đếm - số lượng bản ghi dữ liệu để trả về. Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bắt đầu - ID để bắt đầu từ (0 - bắt đầu). Giá trị của nó phụ thuộc vào các tham số tải động, nếu có;
bộ lọc [column_name] - tên của cột (trong ngoặc) mà quá trình lọc được thực hiện. Giá trị của nó là một chuỗi với khoảng ngày đã chọn
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Bộ lọc Excel
Chỉ có trong phiên bản Webix Pro
Đó là bộ lọc giống như Excel với khả năng tùy chỉnh. Bộ lọc Excel cho phép gọi Bộ lọc Webix và đặt danh sách quy tắc (tùy thuộc vào chế độ được xác định) hoặc loại trừ một số dữ liệu khỏi quá trình lọc
Trong dòng 
{
    id:"year", options:data_collection,
    header:[
        "Released", {
            content:"selectFilter", collect:{ visible:true }
        }
    ]
}
2 bạn có thể đặt
nội dung. "excelFilter" - xác định loại bộ lọc;
chế độ - xác định loại dữ liệu mà bộ lọc sẽ được áp dụng;
mẫu - xác định mẫu của bộ lọc;
filterConfig - xác định cấu hình bộ lọc, nơi bạn có thể đặt bất kỳ cài đặt tiện ích Bộ lọc nào
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
1
Nếu tính năng sắp xếp phía máy chủ được bật, dữ liệu sẽ được lọc và sắp xếp trên máy chủ
Mẫu liên quan.   Bộ lọc Excel trong DataTable
Lọc logic
Mỗi khi người dùng bắt đầu nhập văn bản vào bộ lọc, DataTable sẽ gọi phương thức filterByAll và dữ liệu được lọc lại (kết quả trước đó không được giữ nguyên)
VÀ logic
Theo mặc định, khi có các bộ lọc trong một số cột, DataTable sẽ áp dụng logic AND cho chúng, tôi. e. bảng sẽ chỉ hiển thị các bản ghi đáp ứng tất cả các tiêu chí cùng một lúc
Mẫu liên quan.    Lọc theo một số tiêu chí (VÀ logic)
HOẶC logic
Nếu bạn muốn áp dụng logic OR (để hiển thị các bản ghi đáp ứng ít nhất một trong các tiêu chí), bạn nên xác định lại phương thức filterByAll(). Ví dụ
Triển khai logic OR cho các bộ lọc
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
2
Mẫu liên quan.   Lọc theo một số tiêu chí (HOẶC Logic)



Quy tắc lọc tùy chỉnh
Bạn có thể thay đổi kiểu lọc mặc định bằng cách xác định lại chức năng so sánh của thuộc tính đầu trang(chân trang)
Hàm nhận 3 tham số
cộtValue - một giá trị từ cột (hàm kiểm tra từng giá trị một);
filterValue - giá trị được nhập vào bộ lọc;
đối tượng - đối tượng của bộ lọc
Ví dụ: để làm cho DataTable chỉ được lọc theo phần đầu của chuỗi, hãy xác định hàm như thế này
Lọc theo chữ cái bắt đầu của các giá trị cột
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
3
Mẫu liên quan.   Sử dụng các quy tắc lọc khác nhau
Chuẩn bị các giá trị để lọc
Nếu bạn muốn xử lý trước đầu vào từ bộ lọc, hãy xác định lại chức năng chuẩn bị của bộ lọc trong đối tượng đầu trang (chân trang). Hàm này nhận hai tham số
filterValue - giá trị được nhập vào bộ lọc;
filterObject - đối tượng của bộ lọc
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
4
Lọc theo nhiều tiêu chí được nhập qua một đầu vào
Người dùng có thể lọc DataTable theo các cột khác nhau bằng một đầu vào cho việc này
Điều này có thể được thực hiện bởi
Định nghĩa lại phương thức filterByAll();
Chỉ định quy tắc lọc bổ sung
Lọc theo nhiều tiêu chí (bằng phương pháp filterByAll)
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
5
Mẫu liên quan.   Lọc theo nhiều tiêu chí được nhập qua một đầu vào
Lọc theo nhiều tiêu chí (bằng cách chỉ định quy tắc lọc bổ sung)
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
6
Mẫu liên quan.   Lọc tùy chỉnh theo nhiều tiêu chí được nhập qua một đầu vào
Đầu vào HTML dưới dạng Bộ lọc cho DataTable
Đặt đầu vào HTML làm bộ lọc có thể truy cập dữ liệu
Tạo đầu vào
Đặt bộ lọc tùy chỉnh
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
7
Thêm đầu vào này dưới dạng một loại bộ lọc mới bằng registerFilter
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
8
Mẫu liên quan.   Lọc theo nhiều tiêu chí
Xin lưu ý rằng columnId phải là duy nhất cho mỗi bộ lọc, tích hợp sẵn hoặc mới. Thêm chi tiết trong registerFilter
Lọc tùy chỉnh bằng phương thức filter()
DataTable có phương thức filter() để lọc tùy chỉnh hoàn toàn
Hãy tạo một điều khiển văn bản và lọc một bảng bằng cách nhập vào điều khiển. onTimedKeyPress là sự kiện lý tưởng để bắt đầu lọc
Triển khai bộ lọc tùy chỉnh
{
    id:"year", header:[
        "Released", {
            content:"selectFilter", options:data_collection
        }
    ]
},
{
    id:"title", options:local_array, header:[
        "Film title", {
            content:"multiSelectFilter", options:"server/films/"
        }
    ]
}
9
Mẫu liên quan.   Lọc qua một phần tử đầu vào riêng biệt
Tìm API
Datatable API cho phép dễ dàng tìm kiếm các bản ghi cần thiết với sự trợ giúp của phương thức tìm kiếm của nó
Không giống như lọc, nó không ẩn bất kỳ bản ghi nào. Nó chỉ trả về một mảng các hàng phù hợp với tiêu chí đã cho để sử dụng thêm
Chẳng hạn, nó cho phép làm nổi bật dữ liệu được lọc
{
    id:"year", options:data_collection,
    header:[
        "Released", {
            content:"selectFilter", collect:{ visible:true }
        }
    ]
}
0
Mẫu liên quan.   API "Tìm"
Cấu hình cụ thể của TreeTable
TreeTable tương tự như DataTable, nhưng có một số cài đặt lọc của riêng nó
Thuộc tính filterMode là một đối tượng có thể chứa 2 thuộc tính
showSubItems - (boolean) xác định xem cây phải hiển thị con của các mục đã lọc (đúng) hay các mục đã lọc sẽ được hiển thị dưới dạng con của nút gốc (sai). Giá trị mặc định - true
openParents - (boolean) xác định xem cây sẽ mở rộng các nhánh để hiển thị các mục tìm thấy (đúng) hay giữ nguyên (sai). Giá trị mặc định là true
cấp độ - (số) đặt cấp độ lồng nhau để lọc các mục từ (đánh số dựa trên một)
Sử dụng tham số filterMode
{
    id:"year", options:data_collection,
    header:[
        "Released", {
            content:"selectFilter", collect:{ visible:true }
        }
    ]
}
1
Mẫu liên quan.   Lọc trong DataTree
Hướng dẫn Webix
Bạn có thể đọc thêm và kiểm tra kiến ​​thức của mình trong Hướng dẫn của Webix
Nếu bạn chưa kiểm tra, hãy nhớ truy cập trang web của khung javascript Webix sản phẩm chính của chúng tôi và trang tải xuống sản phẩm có thể dữ liệu