Scripts not working anymore

satyriasis

Hi guys, I recently migrated hosting. and, using formidable forms on wordpress, I just re-imported everything I made, using in a views your scripts... for some reason they dont work any more. Could there be some issue?

<table id="moja" class="display" width="100%"> 
<thead>
<tr>
<th>Br</th>
<th>Termin</th>
<th>Stranka</th>
<th>Kvart</th>
<th>Usluga</th>
<th>Dolasci</th>
<th>Zarada</th>
<th>Status</th>
<th>Uredi</th>
</tr>
</thead>
<tbody>


---data of table-- )long so I did not copy---
 </tbody>
</table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script>
$('#moja').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>

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

kthorngren

Please describe what is not working. Do you get errors in the browser's console?

Can you post a link to your page so we can help debug?

Kevin

satyriasis

ofcourse. here it is: https://masinko.hr/fctbaza/ it is not showing search and pagination bar, and no buttons

allan

No doubt I'm just being a bit daft, but I don't see a table on that page at all? Is there something I need to do to make it show?

Allan

satyriasis

no, sorry, it was my fault, it was set to private, now it is not anymore. can you check again please?

kthorngren

You said the Datatable isn't showing the buttons, search input or paging. I see all of them and a quick test of the search input works and I can download a CSV. Please provide the steps to show the problems you are having.

Kevin

satyriasis

Waiting for the answer, I managed to solve this <script> jQuery(document).ready( function () { jQuery('#moja').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>

But now I have a problem of search button sticking to my form literally, I dont know how to make it separated and also my csv exporting with strange symbols and all data in one row...maybe I did something wrong?

kthorngren

my csv exporting with strange symbols and all data in one row

Looks like there are 4 lines; one header and 3 data rows:

"Br","Termin","Stranka","Kvart","Usluga","Dolasci","Zarada","Status","Uredi"
"1Kreirano: 04.01.2022, 22:19","10-12","Ana Krček , Tvrtka Krček doo  Adresa: Jaruščica 1, 1. kat Broj mobitela: (098)/2828-822 Potreban R1 račun Naziv tvrtke: Krček doo Adresa tvrtke: JAeun 1 , 1. kat OIB: 151552525272","Zagreb, Blato","Perilica rublja i Ugradnja ploče za kuhanje [if 1843]Marka: [1843][/if 1843] [if 2235]Starost: [2235][/if 2235] [if 2236]Problem: [2236 wpautop=0][/if 2236] [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","$0.00 HRK (gotovinski) Račun","U tijeku Draft","|"
"1Kreirano: 04.01.2022, 22:19","","Ana Krček , Tvrtka Krček doo  Potreban R1 račun Naziv tvrtke: Krček doo Adresa tvrtke: JAeun 1 , 1. kat OIB: 151552525272","Zagreb, Blato","Perilica rublja i Ugradnja ploče za kuhanje [if 1843]Marka: [1843][/if 1843] [if 2235]Starost: [2235][/if 2235] [if 2236]Problem: [2236 wpautop=0][/if 2236] [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","() Račun","","|"
"2Kreirano: 05.01.2022, 12:48","13-15","Ana Malina","Sveta Nedelja, Bestovje","Sušilica rublja [if 1843]Marka: [1843][/if 1843]Marka: Electrolux Starost: 2 godine[if 2235]Starost: [2235][/if 2235] Problem: kkkjk[if 2236]Problem: [2236 wpautop=0][/if 2236] Napomena:  kmkj [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","() Račun","","|"

For strange symbols are you referring to things like [if 1886 equals=”Da”]? If so that is in the raw table. You can use the browser's View Source option to see this. You can use Orthogonal data to strip the undesired data. See this example.

search button sticking to my form literally, I dont know how to make it separated

Sorry I'm not sure I understand what you mean. What do you mean by making it separated?

Kevin

satyriasis

I mean search bar wasnt so close to my table before... Is there a way to put some space between?

kthorngren

Maybe adding this CSS will do what you want:

.dataTables_filter input {
    margin-bottom: 30px;
}

Kevin

kthorngren

Looks like you are missing buttons.dataTables.min.css. Adding this might help place the buttons and search input on the same line. Use the Download Builder to get all the correct Datatable libraries.

Kevin

satyriasis

Can I maybe ask you for help, since I dont see it on download list when I click on buttons...I am a bit new so I dont understand this... I now have:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

What do I need to add?
I tried with adding

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.1.0/css/buttons.dataTables.min.css">

it only added the styling to the buttons but still search form is not properly centered now and is sticked to the table beneath... you can check on masinko.hr/fctbaza

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

colin

It looks like you've only added a single CSS file. The best bet is to go to the download page and click on all the extensions you want - you'll see at the bottom of the page all the files you need, which can be copied and pasted into your project.

Colin

satyriasis

Ok, so on this download page, I clicked Step 1. Choose a styling framework
DataTables-- DataTables' default styling., Step 2. Select packages - selected data tables, Extensions - I chose buttons. Under pick default method - I chose CDN and copy pasted this two lines instead of those I had before. I got

```<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/r-2.2.9/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/r-2.2.9/datatables.min.js"></script>```

And the problem is still the same. Does anyone have any suggestion?

kthorngren

As I suggested above you can add this CSS to override the default to move the search input up:

.dataTables_filter input {
    margin-bottom: 30px;
}

Use 30px or whatever value suites your needs.

You still have some problems with the Datatables libraries. You selected buttons in the download builder but you also have 1.6.1/js/dataTables.buttons.min.js listed individually. You don't want to duplicate them plus the download builder provided buttons 2.1.1 and your individual lines have an older 1.6.1 version. This will cause problems:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/datatables.min.js"></script><br />
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script><br />
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script><br />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script><br />
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script><br />
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script></p>

In the download builder you can also choose HTML5 export, JSZip and Print view then replace all the above lines with the two that are generated.

Kevin

satyriasis

Thanks. Where do I put this code for margin bottom?

kthorngren

It is applied within the <style> element on your page. See the Internal CSS of this tutorial.

Kevin

satyriasis

This solved it thanks^!