CODEWITHSUNDEEP
javascriptjqueryjsonajaxdatatable
BaconPancakes
BaconPancakes

Reputation: 395

Cannot edit/create/delete elements in table using Datatables and free editor

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>

Upvotes: 2

Views: 3567

Answers (1)

user6676773
user6676773

Reputation:

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/

Upvotes: 2

Related Questions