Problems initialising Editor table

pcal90

Hi everyone,

I've been very pleased with the results of work I've done on Datatables and decided to step it up a notch and get the Editor table. I've struggled with the initialisation and to be honest, following the guide - which is why I am here.

I've built a table that displays the results of timesheets that have been submitted by staff. If I initialise this table as a Datatable - it displays as I aimed for (columns that do not fit on the screen are hidden and visible underneath when clicking a + button) however if I try to initialise an Editor table - all the columns display across the screen (but cannot be scrolled across to) and the cells are not editable.

The data is coming from SQL Server.
Here is the Javascript -

<script type="text/javascript">
             var editor; // use a global for the submit and return data rendering in the examples
         
             $('#times').DataTable({
                dom: "Bfrtip",
                 ajax: "../php/staff.php",
                 aLengthMenu: [
                     [25, 50, 100, 200, -1],
                     [25, 50, 100, 200, "All"]
                 ],
                 iDisplayLength: -1,
                 responsive: {
                     details: {
                         renderer: function (api, rowIdx) {
                             // Select hidden columns for the given row
                             var data = api.cells(rowIdx, ':hidden').eq(0).map(function (cell) {
                                 var header = $(api.column(cell.column).header());
         
                                 return '<tr>' +
                                     '<td>' +
                                     header.text() + ':' +
                                     '</td> ' +
                                     '<td>' +
                                     api.cell(cell).data() +
                                     '</td>' +
                                     '</tr>';
                             }).toArray().join('');
        
                             return data ?
                                 $('<table/>').append(data) :
                                 false;
                         }
                     }
                 },
         
         
                 select: true,
                 colReorder: true,
                 buttons: [
                     { extend: 'create', editor: editor },
                     { extend: 'edit', editor: editor },
                     { extend: 'remove', editor: editor },
                     {
                         extend: 'collection',
                         text: 'Export',
                         buttons: [
                             'copy',
                             'excel',
                             'csv',
                             'pdf',
                             'print'
                         ]
                     }
                 ]
            });
        
             $(document).ready(function () {
                editor = new $.fn.dataTable.Editor({
                     ajax: "../php/staff.php",
                     table: "#times",
                     fields: [{
                         label: "Name:",
                         name: "name",
                     }, {
                         label: "Employee ID:",
                         name: "employee_no"
                     }, {
                         label: "Week Number:",
                         name: "period_no"
                     }, {
                         label: "Total Hours:",
                         name: "total"
                     }, {
                         label: "Year:",
                         name: "year",
                     }, {
                         label: "Submitted:",
                         name: "submitted",
                     }
         
                     ]
                 });
                
             });
        
             $(document).ready(function () {
                $('button').each(function () {
                    var title = $(this).html();
                  if (title != 'nan') {
                         $(this).removeClass('hidden');
                   }
               })
            });
 </script>

What I am unsure about is the .php files. Excuse my ignorance as I have not done anything with PHP before but the guide refers to staff.php (and I have left it in the Javascript) but I do not know if I need to have a more relevant php file or do I need it at all if the data is coming from SQL Server?

The other issue I have is that the only ID that initialises a table (in my HTML file) is #example. If I change it, it doesn't render as a Datatable or Editor table.

I understand I have a few issues so if all I get sorted is one of them, I'd be happy!

Happy to provide any more info if required. I cannot share screenshots or a working example at the moment as the details in it thus far would need to be removed and dummy data put in instead (which I can do)

Any assistance or advice would be hugely appreciated

rf1234

What is an Editor table? Do you mean the Editor form?

You should work with the examples first and also take a look at the "Server Script" to understand what you need in PHP.
https://editor.datatables.net/examples/simple/simple.html

pcal90

Yes, sorry, I meant the Editor form.

rf1234

What I am unsure about is the .php files. Excuse my ignorance as I have not done anything with PHP before but the guide refers to staff.php (and I have left it in the Javascript) but I do not know if I need to have a more relevant php file or do I need it at all if the data is coming from SQL Server?

Well you need it if you want to use Editor at the back end. Or some other server side language (node.js, .NET etc.). You have these options for the back end: https://editor.datatables.net/download/

If you have no experience with server side coding I recommend you familiarize yourself with it taking an online course etc. You would also need to understand concepts like MVC etc. Good luck!

pcal90

Thanks rf1234 - appreciate the advice. Will start that pronto!