CODEWITHSUNDEEP
jquerywordpressdatatables
Geoff_S
Geoff_S

Reputation: 5107

Editing/deleting rows in Datatables in wordpress

I have a site using 2 different datatables and they are working fine except for some issues getting buttons to display, but other than that, I need an option to edit/delete rows so that if I delete, it will remove from the table and the database but if I edit and save it will update the database.

I've seen an option for a Datatables plugin called Editor but I'm a little lost looking it over and I need an option that will not have any issues on a WordPress site because that's been an issue for me so far.

The link for the site/Datatable is testing.uwsinc.net/dashboardtest and here is my code for the tables:

(function($) {
  $(document).ready(function() {

    $('#mytable').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', 'excel', 'pdf', 'colvis'
      ]
    });


    $('#mytableSurvey').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', 'excel', 'pdf', 'colvis'
      ]
    });
    $('.dataTable').wrap('<div class="dataTables_scroll" />');

    $(document).on('change', '#select-tables', function() {
      var table = $(this).val();
      $('#' + table + '_wrapper').show();
      $('[id$="_wrapper"]').not('#' + table + '_wrapper').hide();
    });
    $("#select-tables").trigger("change");

  });
}(jQuery));
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.15/filtering/row-based/range_dates.js"></script>
</head>

<body>

  <label style="font-weight:bold;">Select the table you would like to view:
    </label></br>
  <select name='tables' id='select-tables'>
    <option value="mytable">Survey Test Table</option>
    <option value="mytableSurvey">Survey Only</option>
  </select>
  </br>

Upvotes: 1

Views: 574

Answers (1)

Alexander Gilmanov
Alexander Gilmanov

Reputation: 387

Editor won’t run purely in frontend, so you would need to have a PHP script in backend that would initialize Editor classes, and would connect each column to a field in DB, there are examples in the Editor tutorials.

However as you are looking for a WordPress solution you may check a plugin that implements frontend table editing in a native WordPress plugin: https://wpdatatables.com/documentation/front-end-editing/creating-editable-tables/

You can make MySQL-based tables editable from site’s frontend, choosing user roles which will be allowed to edit the table, and even foreign keys are supported.

Upvotes: 0

Related Questions