Loading super slow

Loading super slow

satyriasissatyriasis Posts: 30Questions: 7Answers: 0

Link to test case:
Debugger code (debug.datatables.net): https://masinko.hr/baza-podataka-adrese/
Error messages shown:
Description of problem: Hi guys, what can I do when my table reaches a lot of entries?(around 5k) It takes FOREVER to load my website. Is there any solution to this?

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    You loading the table into the DOM then initializing Datatables. See this FAQ about options to improve performance.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    Can you please explain which one of these is best option for me? Also, how to add it to the code here?```

    jQuery(document).ready( function () { jQuery('#ana1').DataTable({ responsive: true, language: { url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/hr.json' }, dom: 'Bfrtip', buttons: [ { extend: 'copy', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'csv', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'excel', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'print', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' } ] }); });

    <style>
    .dataTables_filter input {
    margin-bottom: 30px;
    }
    </style>```

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I’d suggest Ajax loading with deferRender enabled.

    Allan

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    Can someone suggest me how to include code for ajax into my code?

    What I need to add (based on above sugesstion

    $('#example').dataTable( {
      "ajax": "sources/arrays.txt",
      "deferRender": true
    } );
    

    What I have now:

    <script>
    jQuery(document).ready( function () {
      jQuery('#ana1').DataTable({
        responsive: true,
        language: {
          url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/hr.json'
          },
          dom: 'Bfrtip',
          buttons: [
            { extend: 'copy', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'csv', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'excel', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'print', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }
          ] 
      });
    });
    </script>
    

    Everything I try is wrong, I dont have any experience in this, please help me

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You just need to add the ajax into the list of options, so something like:

      jQuery('#ana1').DataTable({
      "ajax": "sources/arrays.txt",
      "deferRender": true,
        responsive: true,
       ...
    

    Colin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    **This gives me error in browser: DataTables warning: table id=ana1 - Ajax error. For more information about this error, please see http://datatables.net/tn/7**

    What I done:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.3/b-2.1.1/b-html5-2.1.1/b-print-2.1.1/r-2.2.9/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.11.3/b-2.1.1/b-html5-2.1.1/b-print-2.1.1/r-2.2.9/datatables.min.js"></script>
    
    
    <script>
    jQuery(document).ready( function () {
     jQuery('#ana1').DataTable({
    "ajax": "sources/arrays.txt",
    "deferRender": true,
        responsive: true,
        language: {
          url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/hr.json'
          },
     dom: 'Bfrtip',
          buttons: [
            { extend: 'copy', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'csv', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'excel', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' },
            { extend: 'print', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }
          ] 
      });
    });
    </script>
    

    Do I need to delete dom: 'Bfrtip', or maybe some of bracquets });?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Follow the troubleshooting steps provided in the error link:
    http://datatables.net/tn/7

    Likely the server is responding with an error. You will need to check the server logs to find the problem.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    I am quite sure I didnt paste Colins code properly. When I put it to old state everything works fine, but loads slowly. Do I need to remove dom: 'Bfrtip',or maybe some of bracquets });?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited January 2022

    Do I need to remove dom: 'Bfrtip',or maybe some of bracquets });?

    No.

    "ajax": "sources/arrays.txt",

    You have this. Do you have a web server to respond to the ajax request?

    If you are not familiar with ajax see this tutorial.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    I am sorry, kthorngren , even after reading this link, I dont understand your question. I am really a beginner asking for a help, and If I fix this, it would be my final step and all of my struggles would be finished... :neutral:

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    What ever I try I get this error message (check on link https://masinko.hr/baza-podataka-adrese/?nocache=1). I really dont know what is a web server to respond, can you suggest me what to write in code?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    really dont know what is a web server to respond, can you suggest me what to write in code?

    Maybe this What is a web server tutorial might help. Choosing what to use is beyond the scope of this forum. Stack Overflow is a better place to ask questions about choosing and setting up a web server.

    Once setup the web server will will respond to the ajax request with the table data.

    Kevin

Sign In or Register to comment.