Dynamically loading editor tables

jmccolgan93

so I have a web app that has several Datatables and currently when the page loads, it will load ALL the tables... that's obviously not good when sometimes I have 20-30 tables on the page. I'm using a dropdown with all my tables to navigate to the table I want to work on. I've written some JS to load the table data as I select the list in the dropdown, that works fine but some things like row reorder aren't working.

is where an approved way to load editor tables dynamically after the initial page load. here's the code I'm using now. I'm sure it's wrong... i don't do alot with JS... lol

$(function () {
            $('#dayselect').selectpicker();
            $("#dayselect").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) {
                var dayid = $(this).find('option').eq(clickedIndex).val();
                var sessionid = $(this).find('option').eq(clickedIndex).attr("data-sessionid")
                getdayinfo(dayid, oldValue, sessionid);
            });
          });

        function getdayinfo(dayid, oldValue, sessionid) {
            //console.log(' dayid:' + dayid + ' oldValue:' + oldValue + ' sessionid:' + sessionid);
            $('#day-'+oldValue).removeClass("show active");
            $('#day-'+dayid).addClass("show active");
            //maketable(dayid, sessionid)

            
        };

        function maketable(dayid, sessionid) {
            var text1 = 'editor' + dayid + '_3'
            console.log(text1)
            
            $('#example' + dayid).DataTable( {
                dom: "<Bflr<t>ip>", 
                lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                pageLength: parseInt("{{generalstuff.tablelength}}"),
                ajax: "/testget2/" + sessionid,
                processing: true,
                columnDefs:[
                    {"visible": false, "targets":1}],
                columns: [
                    { data: null, defaultContent: '<i class="fa-solid fa-ellipsis-vertical"></i>', orderable: false, className:'py-3' },
                    { data: "winnerorder", orderable: false, className:'winnerorder py-3' },
                    { data: "name", orderable: false , className:'editable py-3' },
                    { data: "title", orderable: false , className:'editable py-3' },
                    {data: null, defaultContent: '<i class="fa fa-trash"/>', className: 'py-3 row-remove dt-center', orderable: false}
                ],
                rowReorder: {
                    dataSrc:'winnerorder',
                    editor: window['editor' + dayid + '_2']
                },
                buttons: [ {
                    extend:'createInline',
                    editor: window['editor' + dayid + '_3'],
                    formOptions: {
                        submitTrigger: 4,
                        submitHtml: '<button class="btn btn-secondary buttons-create" tabindex="0" type="button"><span>Add</span></button>'
                    }
                } ],

                order: [ 1, 'asc' ]
            });

        };

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

colin

I'm not too clear on the issue, but one thing that struck me as odd is that the Editor instance in the RowReorder config is different to that in Buttons:

        rowReorder: {
            editor: window['editor' + dayid + '_2']
        buttons: [ {
            editor: window['editor' + dayid + '_3'],

Is that intentional? Is there a reason for that?

Colin