Question

68

Jquery Datatables Editing row

rated 0 times [ 73] [ 5] / answers: 1 / hits: 51262 / 7 Years ago, mon, february 27, 2017, 12:00:00

I am using: jquery.dataTables.js from: https://datatables.net

Issue 1 - Drag and Drop does not work after the user add a new row

What I need:
make the row editable after click in the pencil.

similar to this sample:
https://editor.datatables.net/examples/simple/inTableControls.html

html:

<table id=example class=display width=100% cellspacing=0>

  <thead>

    <tr>

      <th>order</th>

      <th>name</th>

      <th>country</th>

      <th>action</th>

    </tr>

  </thead>

</table>



<button id=addRow>Add New Row</button>

<table id=newRow>

  <tbody>

    <tr>

      <td><select id=selectbasic name=selectbasic class=form-control>

          <option value=1>option 1</option>

          <option value=2>option 2</option>

          <option value=2>option 3</option>

        </select>

      </td>

      <td>DVap

       </td>

      <td>

       www</td>

      <td><i class=fa fa-pencil-square aria-hidden=true></i>

        <i class=fa fa-minus-square aria-hidden=true></i>  </td>

    </tr>

  </tbody>

</table>

jquery:

  $(document).ready(function() {

    var dt = $('#example').dataTable();

    dt.fnDestroy();

  });



  $(document).ready(function() {

    var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';

    var table = $('#example').DataTable({

      ajax: url,

      rowReorder: {

        dataSrc: 'order',

      },

      columns: [{

        data: 'order'

      }, {

        data: 'place'

      }, {

        data: 'name'

      }, {

        data: 'delete'

      }],

      initComplete: function(oSettings) {

        $(this).on('click', i.fa.fa-minus-square, function(e) {

          table.row( $(this).closest('tr') ).remove().draw();

        });

      }

    });



    // add row

    $('#addRow').click(function() {

      //t.row.add( [1,2,3] ).draw();

      var rowHtml = $(#newRow).find(tr)[0].outerHTML

      console.log(rowHtml);

      table.row.add($(rowHtml)).draw();

    });

  });

jsfiddle:
http://jsfiddle.net/5L2qy092/5/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

morganm

Add To Favorites

Follow

Total Points: 626

Total Questions: 95

Total Answers: 95

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

answered 7 Years ago havenbilliec · Accepted Answer

Now you can drag and drop with all the row and not only the first td.

Also the edit is inline the table.
I believe this is what you wanted: WORKING DEMO.

<script>

    $(document).ready(function() {



      var table;



      $(#example).on(mousedown, td .fa.fa-minus-square, function(e) {

        table.row($(this).closest(tr)).remove().draw();

      })



      $(#example).on('mousedown.edit', i.fa.fa-pencil-square, function(e) {



        $(this).removeClass().addClass(fa fa-envelope-o);

        var $row = $(this).closest(tr).off(mousedown);

        var $tds = $row.find(td).not(':first').not(':last');



        $.each($tds, function(i, el) {

          var txt = $(this).text();

          $(this).html().append(<input type='text' value=' + txt + '>);

        });



      });



      $(#example).on('mousedown', input, function(e) {

        e.stopPropagation();

      });



      $(#example).on('mousedown.save', i.fa.fa-envelope-o, function(e) {



        $(this).removeClass().addClass(fa fa-pencil-square);

        var $row = $(this).closest(tr);

        var $tds = $row.find(td).not(':first').not(':last');



        $.each($tds, function(i, el) {

          var txt = $(this).find(input).val()

          $(this).html(txt);

        });

      });





       $(#example).on('mousedown', #selectbasic, function(e) {

        e.stopPropagation();

      });





      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';

      table = $('#example').DataTable({

        ajax: url,

        rowReorder: {

          dataSrc: 'order',

          selector: 'tr'

        },

        columns: [{

          data: 'order'

        }, {

          data: 'place'

        }, {

          data: 'name'

        }, {

          data: 'delete'

        }]

      });



      // add row

      $('#addRow').click(function() {

        //t.row.add( [1,2,3] ).draw();

        var rowHtml = $(#newRow).find(tr)[0].outerHTML

        console.log(rowHtml);

        table.row.add($(rowHtml)).draw();

      });

    });

  </script>