Fuzzy Search not working with Numbers

jmccolgan93

so I just started using the fuzzy search plugin. I'm on version 2.1.7 from the CDN and can't get it to work with fields that have a number in it. when I try to search for a number in the second column (PO#) it doesn't return it, if I turn off fuzzy search it's fine.

below is my table HTML and JS

      <table id="purchaseorders" class="datatables-purchaseorders table nowrap" width="100%">
        <thead>
          <tr>
            <th data-priority="1" class=""></th>
            <th data-priority="2" class="all">PO #</th>
            <th data-priority="5" >Vendor</th>
            <th class="">Job Ref</th>
            <th>Date Created</th>
            <th>Created By</th>
            <th data-priority="3" >Status</th>
            <th data-priority="4" >Grand Total</th>
            <th>Notes</th>
          </tr>
      </thead>
      <tfoot>
        <tr>
            <th class="" colspan="9" style="text-align:right; font-size: inherit;">Total:</th>
        </tr>
    </tfoot>
      </table>

var dt_fixedheader = $(".datatables-purchaseorders").DataTable({
  ajax: {
    url: "/accounts/purchase-orders/data",
    type: "POST",
    data: {
      startdate: starter,
      enddate: ender,
      client: urlParams.get("client"),
      createdby: urlParams.get("createdby"),
    },
  },
  columns: [
    {
      className: "dtr-control p-0 ps-1",
      defaultContent: "",
      orderable: false,
    },
    {
      data: "Inv_no",
      type: "string",
      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders/${data}">${data}</a>`;
      },
    },
    {
      data: "client",

      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders?client=${data}">${data}</a>`;
      },
    },    
    { data: "jobref" },
    { data: "date_created" },
    {
      data: "createdby",
      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders?createdby=${full["userid"]}">${full["createdby"]}</a>`;
      },
    },
    {
      data: "status",
      className: "dt-center",
    },
    { 
      data: "grandtotal"
     },
    { data: "notes" },
  ],
  order: [[1, "asc"]],
  sorting: false,
  processing: false,
  displayLength: displaylen,
  fuzzySearch: {
    toggleSmart: false
  },
});

kthorngren

I think the problem is that the column contains a link:

    {
      data: "client",
 
      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders?client=${data}">${data}</a>`;
      },
    },   

I think you will need to use Orthogonal data to allow the filter process to use the raw data. Maybe something like this:

    {
      data: "client",
 
      render: function (data, type, full, meta) {
        if ( type === 'display' ) {
          // Return the link for display only
          return `<a href="/accounts/purchase-orders?client=${data}">${data}</a>`;
        }
        return data; // Return raw data for filter, sort and type operations.
      },
    },   

Kevin

jmccolgan93

Thanks kthorngren that seemed to help and that article you shared helped a lot as well. I have a few other tables to update based on that.