Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  February 2023

          //Initializing DataTables
          let collectionsTable = $("#collectionsList").DataTable({
              "data": collections,
              "columns": columnas,
              "paging": true,
              "scrollY": 'auto',
              "lengthMenu": lineas(10),
              "searching": true,
              "ordering": true,
              "order": [
                  [2, 'asc']
              ],
              "autoWidth": true,
              "responsive": true,
              "processing" : true,
              "language" : {
                  "url":'dataTables.spanish.json'
              },
              "buttons": botones()
              }).buttons().container().appendTo('#collectionsList_wrapper .col-sm-12:eq(0)');
          //Requesting data
          $.ajax({
              url: '/collections/lista',
              type: 'POST',
              success: function(r) {
                  console.log(collectionsTable);
                  result = JSON.parse(r);
                  collections = result.collections;
                  hasPages(result.pagination);
                  //collectionsTable.clear();
                  collectionsTable.rows.add(collections).draw();
                  if (result.error != undefined) {
                      alertaPopUp(result.error);
                  }
              }
          });
  

  I believe the problem is that language.url is an asynchronous call like ajax. That is if you are having problems with the initial load and getting the not a function error.

      /*function getNewPage (last,cursor,limit) {
          $.ajax({
              url: '/collections/lista',
              type: 'POST',
              data: {
                  page:last,cursor:cursor,limit:limit
              },
              beforeSend:function () {
                  $("#spinger").show();
              },
              success: function(r) {
                  result = JSON.parse(r);
                  collections = result.collections;
                  hasPages(result.pagination);
                  console.log(collectionsTable);
              },
              complete: function () {
                  collectionsTable.clear();
                  collectionsTable.rows.add(collections).draw();
                  $("#spinger").hide();
              }
          });
  

  The collectionsTable is out of context for the function getNewPage. collectionsTable is within the document.ready() function and the getNewPage is outside of this.

  There are two options. The first is to use ajax and use ajax.data as a function to send the parameters:

              data: {
                  page:last,cursor:cursor,limit:limit
              },
  

  Similar to this example. Then use ajax.reload() to fetch the data using the parameters.

  Or if the table structure changes then use destroy() in the getNewPage before the ajax request and reinitialize the datatable in the success function.

  Kevin
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  February 2023

  Or if the problem is just with the getNewPage function you can try getting an instance of the API in the function like this:

  function getNewPage (last,cursor,limit) {
      let collectionsTable = $("#collectionsList").DataTable();
      $.ajax({
          url: '/collections/lista',
  ....
  

  Kevin
• snithfferx Posts: 7Questions: 1Answers: 0

  February 2023

  I understand what you thiink that the problem, but no.
  I have erased the "language" option, but popup the same error message. I attached a screenshot of the error.
  

  I have tried initialize the datatable variable out of the "$(document).ready(function() {}" function in order to use the getNewPage() function, but, when a did that the same error jumps out. And if you can see, the "getNewPage()" function is not in use, because "reload" is not working.
  

  The only way this script works is when a put the initialization inside my $.ajax() request.
  As you can see here:
  

  But, here come the question, How I repopulate when I get new data? If I fill the variable "collections" and then use "collectionsTable.ajax.reload" as documentation says, is not working properly. because, "reload()" is not a function of "collectionsTable" object, for any reason.
  Also, I have to address that "clear", "rows", "add", and "draw" are not functions of "collectionsTable" object. In other forums I read that is because "dataTable" is not the same as "DataTable" when you use the first ("dataTable") supposly return an object and the second one (DataTable) return an Instance of the API, but for me in both return the same object with the same properties.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  February 2023 Answer ✓

  I created a test case for you and found the problem.
  https://live.datatables.net/volorena/1/edit

  You are chaining .buttons().container().appendTo('#collectionsList_wrapper .col-sm-12:eq(0)'); to the Datatables initialization. The jQuery appendTo() method returns a jQuery object. collectionsTable is assigned this jQuery object instead of the Datatables API. I removed the chaining and now the Uncaught TypeError: Cannot read properties of undefined (reading 'add') does not appear.

  Kevin
• snithfferx Posts: 7Questions: 1Answers: 0

  February 2023

  Nice..!
  Works perfectly.
  I correct my code and now show the data as is supposs to do.
  Thanks so much.