text:  jQuery(document).ready(function()
      {
  
          function restoreRow(oTable, nRow) {
              var aData = oTable.fnGetData(nRow);
              var jqTds = $('>td', nRow);
  
              for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                  oTable.fnUpdate(aData[i], nRow, i, false);
              }
  
              oTable.fnDraw();
          }
  
          function editRow(oTable, nRow) { 
              var aData = oTable.fnGetData(nRow);
              var jqTds = $('>td', nRow);
              jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
              jqTds[1].innerHTML = '<input type="text" name="namecatg" class="form-control input-small" value="' + aData[1] + '">';
              
              jqTds[2].innerHTML = '<a class="formu" onclick="submit()">Save</a>';
              jqTds[3].innerHTML = '<a class="cancel" href="">Cancel</a>';
          }
  
          function saveRow(oTable, nRow) {
              var jqInputs = $('input', nRow);
              oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
              oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
              console.log(jqInputs[0].value);
              console.log(jqInputs[1].value);
              oTable.fnUpdate('<a class="edit" href="/categorie">Edit</a>', nRow, 2, false);
              oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 3, false);
              oTable.fnDraw();
          }
  
          function cancelEditRow(oTable, nRow) {
              var jqInputs = $('input', nRow);
              oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
              oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
             
              oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
              oTable.fnDraw();
          }
  
          var table = $('#sample_editable_1');
  
          var oTable = table.dataTable({
              "lengthMenu": [
                  [5, 10, 15, -1],
                  [5, 10, 15, "All"] // change per page values here
              ],
              // set the initial value
              "pageLength": 10,
  
              "language": {
                  "lengthMenu": " _MENU_ records"
              },
              "columnDefs": [{ // set default column settings
                  'orderable': true,
                  'targets': [0]
              }, {
                  "searchable": true,
                  "targets": [0]
              }],
              "order": [
                  [0, "asc"]
              ] // set first column as a default sort by asc
          });
  
          var tableWrapper = $("#sample_editable_1_wrapper");
  
          tableWrapper.find(".dataTables_length select").select2({
              showSearchInput: false //hide search box with special css class
          }); // initialize select2 dropdown
  
          var nEditing = null;
          var nNew = false;
  
          $('#sample_editable_1_new').click(function (e) {
              e.preventDefault();
  
              if (nNew && nEditing) {
                  if (confirm("Previose row not saved. Do you want to save it ?")) {
                      saveRow(oTable, nEditing); // save
                      $(nEditing).find("td:first").html("Untitled");
                      nEditing = null;
                      nNew = false;
  
                  } else {
                      oTable.fnDeleteRow(nEditing); // cancel
                      nEditing = null;
                      nNew = false;
                      
                      return;
                  }
              }
  
              var aiNew = oTable.fnAddData(['', '', '', '']);
              var nRow = oTable.fnGetNodes(aiNew[0]);
              editRow(oTable, nRow);
              nEditing = nRow;
              nNew = true;
          });
  
          table.on('click', '.delete', function (e) {
              e.preventDefault();
  
              if (confirm("Are you sure to delete this row ?") == false) {
                  return;
              }
  
              var nRow = $(this).parents('tr')[0];
              oTable.fnDeleteRow(nRow);
              alert("Deleted! Do not forget to do some ajax to sync with backend :)");
          });
  
          table.on('click', '.cancel', function (e) {
              e.preventDefault();
  
              if (nNew) {
                  oTable.fnDeleteRow(nEditing);
                  nNew = false;
              } else {
                  restoreRow(oTable, nEditing);
                  nEditing = null;
              }
          });
  
          table.on('click', '.edit', function (e) {
              e.preventDefault();
  
              /* Get the row as a parent of the link that was clicked on */
              var nRow = $(this).parents('tr')[0];
  
              if (nEditing !== null && nEditing != nRow) {
                  /* Currently editing - but not this row - restore the old before continuing to edit mode */
                  restoreRow(oTable, nEditing);
                  editRow(oTable, nRow);
                  nEditing = nRow;
              } else if (nEditing == nRow && this.innerHTML == "Save") {
                  /* Editing this row and want to save it */
                  //saveRow(oTable, nEditing);
                 // nEditing = true;
                  $('.form').submit()
                 // alert("Updated! Do not forget to do some ajax to sync with backend :)");
              } else {
                  /* No edit in progress - let's start one */
                  editRow(oTable, nRow);
                  nEditing = nRow;
              }
          });
      });