How to add filter param in vue 3 datatable?

[andykoe24]

hi, how can i add filter param in ajax call?

sample from image 1 is vue 3 version, image 2 is jquery version which can add param easily. i cant find anything regarding ajax->data in your website. it is posible to do it in vue 3 datatable right?

And what if i want to destroy and init table again, how to do that?

[AllanJard]

The ajax attribute just maps directly to the DataTables ajax option, so you can give it an object as well as a string, which is how you would do it.

[andykoe24]

ok, will try it out.

How about reinitialize datatable using vue 3 plug in method?

[andykoe24]

Hi Allan, the options you suggest is working fine, thanks for that.

Now left the reinitialize datatable/draw method.

[AllanJard]

You could use the destroy option if you wanted to re-init it. There isn't a Vue specific API that I've exposed for that.

[avpet979]

Hi everybody! is there any working example with ajax custom filtering?

[AllanJard]

What kind of custom filtering? A DataTables search plug-in, column filtering, something else? The answer is likely no there isn't a Vue specific example, but almost all the DataTables examples can be adapted for the Vue integration plugin.

[avpet979]

What kind of custom filtering? A DataTables search plug-in, column filtering, something else? The answer is likely no there isn't a Vue specific example, but almost all the DataTables examples can be adapted for the Vue integration plugin.

i understand about ajax_url and params for custom column filters, but i failed to make destroy/redraw method work

[AllanJard]

I'm not sure how destroy / redraw relates to your question about custom Ajax filtering. Perhaps you can link to an example that shows what you've got at the moment.

[avpet979]

i'm talking about param filtering, sorry.

        <input type="text"  v-model="ajax_request.data.name">
        <DataTable 
            :columns=columns
            :options="{ 
                select: true,
                serverSide: true,
            }"
            :ajax=ajax_request
            ref="table"
        >

  columns: [
      { data: 'name' },
      { data: 'actions',},
  ],
  ajax_request: {
      url:'/get_data/',
      data: {
          name: null,
      }
  },

jQuery has .draw() method to refresh table by filtering parameter on input change or button submit. In this example i have just one filter and here i can use global filter. But my task is to make advanced filter with checkboxes and radio buttons. And i can't to make it work.

[wdporter]

But the example wouldn't work in the way the datatables examples are, https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html because you would have to use vue refs to manipulate the dom, you shouldn't manipulate the dom inside a vue app https://vuejs.org/guide/essentials/template-refs.html.

With love, David Porter

On Mon, 6 Feb 2023, at 7:51 PM, Allan Jardine wrote:

What kind of custom filtering? A DataTables search plug-in, column filtering, something else? The answer is likely no there isn't a Vue specific example, but almost all the DataTables examples can be adapted for the Vue integration plugin.

— Reply to this email directly, view it on GitHub https://github.com/DataTables/Vue/issues/13#issuecomment-1418802401, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWNAQBDX3MJD6PQR5AFH33WWDCQNANCNFSM6AAAAAATSDEK64. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[AllanJard]

You can to some extent, particularly if you add v-once to the container. DataTables controls the DOM for the table, not Vue (having them both try to control it would be a disaster, and that's way v-for can't be used to populate the table - it must be loaded in by the DataTables ajax or data parameters. So DOM manipulation such as the example linked to there, can work, just be aware of the potential issues.

jQuery has .draw() method to refresh table by filtering parameter on input change or button submit

DataTables has a draw() method, not jQuery. And you can access the DataTables instance that this plug-in uses through the dt parameter. As such you can call draw() on that if that is what you need.

You can also use ajax.data as a function (see reference here) to dynamically get and update data whenever the request is made.

[avpet979]

Allan, thanks a lot for your help. Param filtering is working just fine! i've read the vue docs carefully and fix my errors.