Loading super slow

satyriasis

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?

kthorngren

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

Kevin

satyriasis

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>```

allan

I’d suggest Ajax loading with deferRender enabled.

Allan

satyriasis

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.

colin

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

satyriasis

**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 });?

kthorngren

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

satyriasis

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 });?

kthorngren

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

satyriasis

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...

satyriasis

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?

kthorngren

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