Problem accessing row/cell value with Jquery API within Salesforce LWC

apurba1005

I have created a datatable in LWC using jQuery Datatable library. The table shows up correctly. I have added a checkbox in front of each row in the table so that the user can select any rows and can execute some custom action in the server side.

Note - I'm not using lightning-datatable tag to use some sort-search capability of JQuery datatable.

Below is my sample code :

//Query for the table using this.template.querySelector();

const table = this.template.querySelector('.example-table');

//Manually construct the table's headers
const columnHeaders = ['Id', 'Name'];

let columnHeaderHtml = '<thead><tr>';

columnHeaders.forEach(function(header) {
columnHeaderHtml += '<th>' + header + '</th>';
});

columnHeaderHtml += '</tr></thead>';
table.innerHTML = columnHeaderHtml;

//Initialize DataTables

let dataTable = $(table).DataTable();
Populate the Data Table!
Note: 'recordsQueried' is just a list of SOQL'd records.

this.recordsQueried.forEach(function(recordObj) {
tableRow.push('<input class="checkBoxcls" type="checkbox" id="'+recordObj.Id+'"/>');
let sUrl = '/lightning/r/Account/' + recordObj.Id + '/view';
tableRow.push('<a href="' + sUrl + '">' + recordObj.Name + '</a>');
tableRow.push(recordObj.Phone!= undefined ? Phone: '');
....
.....<<more rows added>>
})
oDataTable.draw();

How can I select a particular column and get the specific cell value stored in an array as there could be multiple column selected at the same time.

kthorngren

It looks like you are initializing the Datatable against an empty table. Are you directly updating the HTML table to populate the rows? If so Datatables won't know about the added rows and will report an empty table in the info element at the bottom of the table. For this case initialize Datatables after you add the rows to the HTML table. Or use rows.add() to add the rows to the table.

You can use row().data(), cell().data() or column().data() to fetch the appropriate data. Use the plural form of these APIs to get multiple values. Optionally you can use toArray() to convert the result to a Javascript array.

Kevin

apurba1005

@kthorngren - I have a serverside controller class that is feeding the html table using the tableRow.push(..) statements. I have modified this - https://datatables.net/examples/api/multi_filter.html to use the multicolumn search and filter and on top of that Adding a selection (checkbox) in front of each row and trying to get the value of selected row.

kthorngren

Can you post a link to your page or a test case replicating the issues you want help with so we can understand what you have?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

apurba1005

@kthorngren - I am trying to use a checkbox with selection in a datatable https://datatables.net/extensions/select/examples/initialisation/checkbox.html and multi-column filter with search as in this link - https://datatables.net/examples/api/multi_filter.html. Both of this together in a single table.

Here's the link to a live prototype code : https://live.datatables.net/wobekake/1/edit

Seems both of these don't work with each other or I am missing something.

colin

The initialisation of the first table is very wrong. Within initComplete, you're defining columnDefs - this is both syntatically incorrect (hence the errors) and grammatically, as columnDefs can't be chained off of columns().

The example doesn't match what you've been describing, there isn't a checkbox, so it would be worth fixing those errors and updating the example so it demonstrates your issue.

Colin

apurba1005

Thanks for your input. Here is an updated piece. I was able to add the checkbox with datatable. Now the problem is, based on the checkbox checked/unchecked status, I want to log the row value. But that checked/uncheck function is not working inside document.ready(). Could you please advice what am I doing wrong here.
- https://live.datatables.net/wobekake/3/edit

kthorngren

The Select extension doesn't create a standard checkbox. You can inspect the cell to see there is not a standard HTML checkbox. Use Select APIs and events to handle changes and check row selection.

For your test case you will need to use delegated events as shown in this example for your click event. In the click event handler use the row().selected() API to determine if the checkbox is checked. I slight delay (setTImeout) is need to allow time for the Select extension handlers to select or unselect the row when clicked. I updated you example to show this:
https://live.datatables.net/hikofegu/1/edit

Kevin

apurba1005

this works great. thanks for the help Kevin. One last question, I am using this datatable inside salesforce server which generates dynamic id for table and all other tag. So, I used this.template.querySelector('.<<classSelector>>'); to identify the datatable and that works for me perfectly.
But I can't use the same format here - $('#example tbody').on('click', ".select-checkbox", function() as then it neither detect the classSelector and not the #example table-id as the id gets changed by salesforce dom.

Is there a way I can move the whole sector
$('#example tbody').on('click', ".select-checkbox", function(){ var table = $('#example').DataTable(); var tr = $( this ).closest( 'tr' );
inside the following piece $('#example').DataTable({ ... ... });

Ideally, I am trying to avoid multiple time $('#example') and use it once only where I am using columnDefs, initcomplete and search code logic inside inside the following piece$('#example').DataTable({
...
...
});```

Thanks in advance!

apurba1005

thanks for the code piece. it works in pure js but I am using it inside salesforce which generates dynamic table id. I can get rid of that once using class selector inside $('#example').DataTable({ columnDefs: [{ .... }], initComplete: function() { })
and use this.template.querySelector('.tableCls') to avoid the id selector. My query is - how can I avoid - using $('#example tbody').on('click', ".select-checkbox", function(){ and $('#example tfoot th:not(:first)').each(function() { or move these two pieces inside $('#example').DataTable({ method that I posted here?

Basically, I am trying to avoid referring to $('#example') being a table id multiple times where it is using chain of selectors with a space like $('#example tfoot th:not(:first)'). TIA.

kthorngren

You can move the code into initComplete. This example shows how to do the same delegated events with jQuery. The key is the ability to setup delegated events as only the page being shown is in the DOM so you need to tie the event handler to a parent element that is always in the DOM.

Kevin

kthorngren

Basically, I am trying to avoid referring to $('#example') being a table id multiple times where it is using chain of selectors with a space like $('#example tfoot th:not(:first)')

Sorry I'm not sure how you would be able to create multiple event handlers without using these selectors. You might be able to make more generic selectors like using the table selector if you have only one table, for example $('table tfoot th:not(:first)'). It would depend on your environment.

Kevin

allan

If I've understood correctly, you could use:

var tableEl = this.template.querySelector('.<<classSelector>>');

$('tbody', tableEl).on('click', ".select-checkbox", function(){
  // ...
});

$('tfoot th:not(:first)', tableEl).each(function() {
  // ...
});

Allan