searchbuilder columns restriction not working when a dedicated button is assigned

Clark S

{
      language: {
        searchBuilder: {
          title: "",
          button: "Filter (%d)",
        },
      },
      dom: "BQrtip",
      ajax: { url: "", type: "POST" },
      serverSide: true,
      responsive: true,
      pageLength: 50,
      columnDefs: [
        { responsivePriority: 1, targets: [0, 6, 9, 10] },
        { responsivePriority: 100, targets: [1] },
        { responsivePriority: 200, targets: [2, 4] },
        { responsivePriority: 300, targets: [3, 5, 7] },
        { className: "dt-center", targets: [1, 2, 3, 4, 5] },
        { className: "dt-right", targets: [6, 7] },
        { orderable: false, targets: [1, 3, 8] },
        { searchable: false, targets: [6, 7, 8, 9, 10] },
        {
          width: "20px",
          className: "dt-center",
          targets: [8, 9, 10],
        },
      ],
      columns: [
        {
          data: "invoice_no",
          render: function (data, type, row, meta) {
            if (row.status === "pending") {
              return `<span class="position-relative">
              ${data}
              <span class="position-absolute top-0 start-0 translate-middle p-1 bg-primary border border-light rounded-circle">
              <span class="visually-hidden">New alerts</span>
              </span></span>`;
              return `<span class="badge rounded-pill bg-primary">Pending</span> ${data}`;
            } else if (row.status === "error") {
              return `<span class="position-relative">
              ${data}
              <span class="position-absolute top-0 start-200 translate-middle p-1 bg-danger border border-light rounded-circle">
              <span class="visually-hidden">New alerts</span>
              </span></span>`;
            } else {
              return data;
            }
          },
        },
        {
          data: "purchase_from",
        },
        {
          data: "bol",
        },
        {
          data: "fuel_type",
        },
        {
          data: "pickup_date",
          searchBuilderType: "date",
        },
        {
          data: "receive_date",
          searchBuilderType: "date",
        },
        {
          data: "dollar_amount",
          render: $.fn.dataTable.render.number(",", ".", 2, "$"),
          searchBuilderType: "num",
        },
        {
          data: "litre_amount",
          render: $.fn.dataTable.render.number(",", ".", 2),
          searchBuilderType: "num",
        },
        {
          data: "attachment",
          render: function (data, type, row, meta) {
            if (row.attachment) {
              const attachment = row.attachment;
              const file = editor.file("attachments", attachment);
              if (file) {
                return `<i class="text-danger fas fa-file-pdf pointer-hand" onclick="showPreview('${file.web_path}')"></i>`;
              } else {
                return "";
              }
            } else {
              return "";
            }
          },
        },
        {
          data: null,
          className: "dt-center editor-edit",
          defaultContent: '<i class="fas fa-pencil-alt pointer-hand"></i>',
          orderable: false,
        },
        {
          data: null,
          className: "dt-center editor-delete",
          defaultContent: '<i class="fas fa-trash-alt pointer-hand"></i>',
          orderable: false,
        },
      ],
      order: [[0, "desc"]],
      select: false,
      lengthChange: false,
      buttons: [
        {
          **extend: "searchBuilder",
          config: {
            searchBuilder: {
              columns: [0, 1, 2, 3],
            },**
          },
        },

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

One thing to note is that you're using both columns and columnDefs - it would be better to put the latter into the former, so they're just in the one object.

Regarding the issue, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

colin

I just knocked out a quick example, and it appears to be working as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Clark S

hi Colin,

i noticed the diff in your example,

and fixed mine. thnx