Answers

• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  PS : is there an npm module for DT_Debug ?
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  February 2023 edited February 2023 Answer ✓

  What you've got there should be enough. If it isn't working, can you link to a test case showing the issue so I can see what is going wrong?

  PS : is there an npm module for DT_Debug ?

  No. I'm not sure what it would do really? It was designed as a bookmarklet.

  Allan

  edit You could try calling row().select() and check that operates. If it doesn't, Select hasn't been loaded.
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  Ah, great ! I’ll try that
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  I'm working on this.
  During my exploration, I found this issue https://github.com/DataTables/Dist-DataTables-Bootstrap5/issues/5
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  Hi @allan,
  I've prepared a public repository to reproduce this issue :
  https://github.com/RupertBarrow/lwc-oss-datatable

  It's all described in the ReadMe.
  Bottom line : the select call via Api works (great !), but manual selection does not. This is probably due to event management and propagation, possibly inteferred with by the LWC shadow/light DOM stuff.

  Tell me what you think.
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  @allan , is there a way of knowing if the Datatable is receiving mouse-clicks when I try to select ?
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  February 2023

  This is the weirdest thing I've ever encountered!

  Here is the output from my console with a break point where you initialise the DataTable

  > jQuery('div.col-sm-12').eq(2).children('table')
  < Object { 0: table#DataTables_Table_0.tableCls.slds-table.slds-table_cell-buffer.slds-table_bordered.dataTable.no-footer
  , length: 1, prevObject: {…} }
  

  Awesome - so the table is there. But:

  > jQuery('table')
  < Object { length: 0, prevObject: {…} }
  

  jQuery can't select it.

  > document.querySelectorAll('table')
  < Object {  }
  

  Neither can QSA.

  That is just about the weirdest thing I've ever seen! Still digging into it.

  Allan
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  February 2023 Answer ✓

  QSA picks up the child elements though! It has to be something to do with lwc:dom="manual", but I don't know anything about this framework.

  If I change the template for baseTable to be:

  <template>
    <div lwc:dom="manual"></div>
  </template>
  

  And then the JS to have:

      // Table
      let container = this.template.querySelector("div")
      let table = $('<table lwc:dom="manual" class="tableCls slds-table slds-table_cell-buffer slds-table_bordered" style="width: 100%"></table>');
  
      table.appendTo(container);
  
      this.oDataTable = $(table).DataTable({
         ...
  

  Then Select works as expected.

  Lightning must be doing something to the element that is stopping DOM selectors from picking it up, and that is causing the issue. This is something for the Lightning dev team. I would guess it is expected behaviour, but it is causing issues to external libraries such as DataTables here.

  Allan
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  Thanks @allan !
  As mentioned in my test, this is most certainly due to the way LWC (Lightning Web Component) interferes with the DOM.

  Regarding jQuery : please note that I load jQuery in the context of the baseTable component, so it is not available globally.
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  Wow, thanks for that workaround, I will take a look straight away !
• RupertBarrow Posts: 23Questions: 3Answers: 0

  February 2023

  Thank you SO much for this help, it's working great.
• allan Posts: 63,689Questions: 1Answers: 10,500 Site admin

  February 2023 Answer ✓

  Awesome - great to hear that did the job

  Allan