Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
722 views
in Technique[技术] by (71.8m points)

Tabulator: Selecting all filtered rows also selects unfiltered/hidden ones

I implemented the built-in row selection and header filters in my tabulator implementation.

However, let's say I have 10 total records and I do a filter to display only the 3 related rows, all rows are still selected when I do a select all even if they are not filtered nor visible.

My expectation is that it should have selected only those filtered or visible rows only.

Below is my code snippet.

        var table = new Tabulator("#job_openings_table_wrapper", {
          data: tableData,
          persistence: true,
          height: "420px",
          pagination: "local",
          paginationSize: 10,
          paginationSizeSelector: [10, 20, 50, 100],
          footerElement:
            "<div id='record-count-container' class='table-footer-element'><label>Total Records:</label><span id='record-count' class='ml-1'>#</span></div><div id='selected-record-count-container' class='table-footer-element'><label>Selected:</label><span id='selected-record-count' class='ml-1'>#</span></div>",
          dataFiltered: update_record_count,
          dataLoaded: update_record_count,
          rowSelectionChanged: update_selected_record_count,
          rowContextMenu: rowContextMenuBuilder,
          columns: [
            {
              formatter: "rowSelection",
              titleFormatter: "rowSelection",
              align: "center",
              headerSort: false,
              cssClass: "",
            },
            {
              title: "Job ID",
              field: "job_id",
              width: 150,
              formatter: "link",
              formatterParams: { url: "#", target: null },
              cellClick: jobIdCellOnClick,
              headerFilter: "input",
            },
            {
              title: "Position",
              field: "position",
              width: 250,
              editor: "select",
              headerFilter: true,
              headerFilterParams: {
                values: {
                  "Enterprise Architect": "Enterprise Architect",
                  "NodeJS Senior Developer": "NodeJS Senior Developer",
                  "Junior Business Analyst": "Junior Business Analyst",
                  "Accountant": "Accountant",
                  "Senior Accountant": "Senior Accountant",
                  "Finance Officer": "Finance Officer",
                  "Quality Assurance Analyst": "Quality Assurance Analyst",
                  "HR Staff": "HR Staff",
                  "HR Staff": "HR Staff",
                  "HR Manager": "HR Manager",
                  "Chief Technology Officer": "Chief Technology Officer",
                },
              },              
            },
            {
              title: "Employment Type",
              field: "employment_type",
              width: 160,
              editor: "select",
              headerFilter: true,
              headerFilterParams: {
                values: {
                  Contractual: "Contractual",
                  "Project-based": "Project-based",
                  Regular: "Regular",
                },
              },
            },
            {
              title: "Hiring Department",
              field: "hiring_department",
              width: 250,
              editor: "select",
              headerFilter: true,
              headerFilterParams: {
                values: {
                  "Information Technology Group":
                    "Information Technology Group",
                  "Human Resources": "Human Resources",
                  Finance: "Finance",
                  Accounting: "Accounting",
                },
              },
            },
            {
              title: "Status",
              field: "status",
              width: 140,
              editor: "select",
              headerFilter: true,
              headerFilterParams: {
                values: {
                  Draft: "Draft",
                  Posted: "Posted",
                  "On-Hold": "On-Hold",
                  Cancelled: "Cancelled",
                  Closed: "Closed",
                },
              },
            },
            {
              title: "Created On",
              field: "created_on",
              width: 180,
              headerFilter: "input",
            },
          ],
        });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...