Switching from DataTables only to Editor

mokemonster

I set up DataTables using Ajax and got it working (thanks Kevin!). Now I am trying to make it work with Editor on the 15 day trial. I have the database set and have loaded my JSON data, and everything looks good BUT all the customizations I made to my table previously no longer work. I know that you can't initialize the table twice which is what I think is the reason my existing code no longer works, but with the exception of the fixed header (which I learned can be called from the API with table.fixedHeader.enable( true ); ) I don't understand how to re-phrase all of my previous code so it'll work with Editor.

This is what I had for DataTables. (I know I don't need to call ajax anymore):

<script>
    $(document).ready(function() {
        $('#icnTable').DataTable( {
            "fixedHeader": true,
            "ajax": "icon-list.json",
            "bPaginate": false,
            "dom": '<"top"fi>rt',
            "order": [[ 1, "desc" ]],
            "rowDefs": [
                        { "sClass": "header-row", "aTargets": [ 0 ] }
            ],
            "columnDefs": [
                        { "sClass": "code", "aTargets": [ 1 ] },
                        { "sClass": "icon-column", "aTargets": [ 0 ] }
            ],
                    
            "columns": [
                { "data": "Icon", render: function (data, type, row) { 
                        return '<button class="dvi-2x ico-btn ' + row.Class + '" data-clipboard-text="' + data + '"></button>'; 
                    } 
                },
                { "data": "Class" },
                { "data": "Keywords" },
                { "data": "Category" },
                { "data": "Unicode" }
            ]
     } );
    } );
    </script>

How can I get all of these same customizations to work in Editor?
DataTables only version: https://ericaaugustine.com/icons-dt/iconfont-cheatsheet.html
Editor version: https://ericaaugustine.com/icons/

allan

Colin has added a reply here.

Allan

mokemonster

Thank you both, no more party icons for me!

Collin said

You can just leave the DataTables initialisation the same, with just adding the button definitions for the editing controls. If you look at this example here, without Editor, the table definition would just have the buttons section removed.

I've kept the same stuff I had for my plain DataTable and added the button definitions, but it still seems to be ignoring all the other customizations I have—I'd removed paging, had some extra classes applied to some columns, and did some transforms on my data, but none of that is happening with my Editor table.

colin

Are you able to link to the page, please, so we can take a look? Or if not, could you post the code here, please.

Colin

mokemonster

Yes, I provided a link to the page in both of my posts in the fancy Markdown way. Here's a plain link: https://ericaaugustine.com/icons/

kthorngren

Your browser's console is showing these errors:

Uncaught SyntaxError: Unexpected token '}'

Not sure where this is at. Maybe use W3C Validator or your IDE to look for syntax errors.

Uncaught TypeError: $(...).tooltip is not a function

Since you are loading jquery.js via the Datatables combined CDN you need to load popper.js after. There two lines need to be swapped:

       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.0/b-2.2.3/date-1.1.2/fh-3.2.3/r-2.3.0/sl-1.4.0/datatables.min.js"></script>

I would start by fixing those. There is nothing else obvious when comparing the source code for the working and non-working pages.

Kevin

mokemonster

Yeah, I'm at a loss. I validated the HTML and the JS and fixed the little things they found, which have no impact. I switched the order of the two scripts but am still getting the tooltip not a function error. And my table is still ignoring all my configurations.

The funny thing is, if I format the javascript the same way as in the example, I get the Tech Note 3 error about double initializations. I had to comment out some of the code to get that to go away.

var editor;
    $(document).ready(function() {
         editor = new $.fn.dataTable.Editor( {
            table: "#iconTable",
            ajax: "icon-list.json", 
    //     } );
    //  $('#iconTable').DataTable( {
            fixedHeader: true,
           // ajax: "icon-list.json",
            paging: false,
            dom: '<"top"fi>rt',
//...etc

kthorngren

In your working example you are loading this version of jquery-3.6.0.min.js but in the non-working you are loading jQuery 1.12.4 via the CDN. I suspect popper.js might not work with 1.12.4??? Open the CDN URL you will see a link to update the versions. Open that URL and change the jQuery version. Or remove it and load it separately like before.

I get the Tech Note 3 error about double initializations

Sorry I'm not sure what the code snippet is showing as you have code commented out. However follow the troubleshooting steps at the technote or post a test case so we can take a look.

Kevin

mokemonster

Oh, sorry; I uncommented it so you can see the issue. https://ericaaugustine.com/icons/

I also commented out the tooltip and clipboard script at the bottom since changing the jQuery version didn't fix it—that's a separate issue and I'll figure it out later. It doesn't seem to have been having an impact on DataTables or Editor though.

Thanks!

kthorngren

If you put breakpoint or use console.log statements you will see the $(document).ready() function fires twice.

You have the script tag with the Datatables init in the head of the page. Try moving that section before the closing body tag - just like the other code you commented out. See this tutorial.

Kevin

mokemonster

Yes, that makes sense. I've broken up the two sections and moved the second to the bottom script. I even added retrieve: true, to it, and now my configurations show up, but am still getting the Tech Note 3 error. I'm not sure how $(document).ready() is firing twice when I only have it in there once.

And though I see how it makes sense to call the configurations at the end after the table has loaded, I don't understand why the initialisation example shows it all together?

kthorngren

You also have a file called table.iconTable.js which is initializing Datatables. So you have it in two spots causing the reinitialization error. Maybe remove the Editor and Datatables init code from the index page and use what you have in table.iconTable.js.

Kevin

mokemonster

That worked! I had forgotten the Generator creates that file and it wasn't clear to me the initialisation doc was referencing that. I moved everything into it the table and all my customizations work fine now.

Thank you again, Kevin!