2

I am trying to build an editable table with data in JSON format from an AJAX call. For this I am using the Datatables plugin together with the Free Datatables Editor (kingkode.com/free-datatables-editor-alternative/). I can't use the Datatables Editor because i can only use libraries that are open source.

At the moment I am just using my own simpleHTTPserver to provide the JSON, which is why the link is pointing to localhost.

The table shows the correct data initially, but i cannot edit/create/delete any of the elements, as the value of the selected row seems to be undefined and it provides an error on confirm/submit.

Pictures of errors:

Delete - seems that value is undefined Delete - seems that value is undefined

Create - Error message
Create - Error message

I don't understand what I am missing or doing wrong, so any help that can get me on the right track would be great!

Script:

    $(document).ready(function() {

var columnDefs = [{
    title: "NTP Servers",
    data: "ntp_server"
  }];

//Table creation
var myTable = $('#testTableData').dataTable({
  "ajax": "http://localhost:6112/data.php",
  columns: columnDefs,
    dom: 'Bfrltip',        
    select: 'single',
    responsive: true,
    altEditor: true,     
    buttons: [{
            text: 'Create',
            name: 'add'        
          },
          {
            extend: 'selected', 
            text: 'Edit',
            name: 'edit'        
          },
          {
            extend: 'selected', 
            text: 'Delete',
            name: 'delete'      
          },]
        });
});

HTML:

  <form id="fe">
    <div class="container">

      <h1>Data Table - Network/Time</h1>
      <table class="dataTable table table-striped" id="testTableData">
      </table>

    </div>
  </form>

JSON data example:

{
    "data": [{
        "DT_RowId": 0,
        "ntp_server": "1.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 1,
        "ntp_server": "2.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 2,
        "ntp_server": "3.openwrt.pool.ntp.org"
    }]
}

The libraries i have included:

 <script src="libs/js/jquery.js"></script>
  <script src="libs/js/bootstrap.min.js"></script>
  <script src="libs/js/jquery.dataTables.min.js"></script>
  <script src="libs/js/dataTables.bootstrap.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/dataTables.buttons.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/buttons.bootstrap.min.js"></script>
  <script src="libs/Select-1.2.0/js/dataTables.select.min.js"></script>
  <script src="libs/js/altEditor/dataTables.altEditor.free.js"></script>
BaconPancakes
  • 375
  • 7
  • 21
  • what is this monstrosity? `var json = JSON.stringify(eval('(' + data + ')'));` – Ozan Aug 12 '16 at 08:12
  • You should not need the load data and render table functions, table tables will take care of that for you. See the Docs here https://datatables.net/examples/data_sources/ajax.html – IWebb Aug 12 '16 at 08:15
  • You can implement your own inline editor in datatable by spending 20 to 30 min only. – Mayank Pandeyz Aug 12 '16 at 08:21
  • IWebb: I would like to implement a refresh button later on, and I therefore opted for being able to call a function to render the table. I'm not very experienced in this, so is this a bad way of doing it? @MayankPandey: I would like to avoid using inline editing and use modals instead, which is why i went with the free editor. Is this a bad solution? – BaconPancakes Aug 12 '16 at 08:29
  • I have edited the – BaconPancakes Aug 12 '16 at 08:45

1 Answers1

2

I have check the code in dataTables.altEditor.free.js and saw that you really should use an array of arrays as data or it will not work. So there are two Ways for you:

  1. rewrite some parts of dataTables.altEditor.free.js
  2. restructure your data like it is here: http://jsfiddle.net/rmcmaster/bbLjzspf/22/
Veas
  • 160
  • 8