How to create a badge element for each selected value of the Searchpanes

flamingo_7

How can I create a badge element for each selected value? The badge should have the label and a clickable 'x'. When the 'x' is clicked, it triggers the deselect method on that pane's selection and redraws the table.

I tried to use an AI; here's the code: https://live.datatables.net/soniruzo/4/edit

But it doesn‘t work.

Please help me check where the error is.

I attached an example from another website of how it should work.

flamingo_7

Some changes in style
https://live.datatables.net/soniruzo/5/edit

kthorngren

That AI generated code won't work. At this time there are no documented/public events for SearchPanes. So the event handler dt.on('searchpanes.updated', function() { ... }) never fires.

This was a fun exercise to create this morning:
https://live.datatables.net/hihukoru/1/edit

It uses the select and deselect events of the Datatables that SearchPanes creates. For example:

$( 'div.dt-scroll-body table', table.searchPanes.container() ).on('select.dt', function ( e, dt, type, indexes ) {
  var data = dt
  .rows(indexes)
  .data()
  .pluck( 'display' )
  .toArray();
    
  updateBadges(dt, data, true);
  
});

Using /searchPanes.container() you can limit the tables found to just the SearchPanes container.

The event handler use the indexes parameter to fetch the rows().data() of the selected rows. Use pluck() to get the display object (the text displayed in the SearchPane. Use toArray() to convert the result to a JS array.

The example uses the function updateBadges() to manages the "badges". To keep things simple the example doesn't actually use badges. I will let you build the code for this. Instead it just displays the selected results in a div.

For the function refer to the following Datatables API's:

table().node()
row() with the row-selector as a function.
row().deselect()

Hope this gets you started.

Kevin