Jquery Datatables stop RowReorder

Question

fiddle It is working fine, I just wanna stop the rowreorder from table 2 without break the drag and drop functionality

edit

drag and drop always worked, what I want it is stop the rowreorder from table 2, simple as this. I need stop the moving in table 2, the cells can't move on this table 2

to test:

click edit button in the row in table 1.

Problem:

  rowReorder: {
    dataSrc: 'member',
    selector: 'tr'
  },

I want to table 2 stop do row-reorder, when I try to drag and drop from table 2 to table 1, the rows in table 2 can move this should not happen.

what I trying to archive:

stop make the rows row-reorder in table 2 without break the drag drop functionality

what I trying to archive:

 $(document).ready(function() {
   var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
   var options = [{
     key: 'option 1',
     value: 1
   }, {
     key: 'option 2',
     value: 2
   }, {
     key: 'option 3',
     value: 3
   }];

   var rowCache = [];

   function mouseUp(event) {
     var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

     if (ctrl.length > 0 && rowCache.length > 0) {
       var el = rowCache[0];
       var data = el.row.data();

       if (data.length > 0) {
         ctrl.val(data[0].name);
         el.row.remove().draw();
       }
     }

     rowCache = [];
     $('#example tr td:nth-child(2) input').removeClass('border-highlight');
   }

   $(document).ready(function() {
     var $table = $('#example');
     var dataTable = null;

     $('body').mouseup(mouseUp);

     $table.on('mousedown', 'td .fa.fa-minus-square', function(e) {
       dataTable.row($(this).closest("tr")).remove().draw();
     });

     $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) {
       enableRowEdit($(this));
     });

     $table.on('mousedown', 'input', function(e) {
       e.stopPropagation();
     });

     $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) {
       updateRow($(this), true); // Pass save button to function.
     });

     $table.on('mousedown', '.select-basic', function(e) {
       e.stopPropagation();
     });

     dataTable = $table.DataTable({
       ajax: dataUrl,
       rowReorder: {
         dataSrc: 'order',
         selector: 'tr'
       },
       columns: [{
         data: 'order'
       }, {
         data: 'name'
       }, {
         data: 'place'
       }, {
         data: 'delete'
       }]
     });

     $table.css('border-bottom', 'none')
       .after($('<div>').addClass('addRow')
         .append($('<button>').attr('id', 'addRow').text('Add New Row')));

     // Add row
     $('#addRow').click(function() {
       var $row = $("#new-row-template").find('tr').clone();
       dataTable.row.add($row).draw();
       // Toggle edit mode upon creation.
       enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square'));
     });

     $('#btn-save').on('click', function() {
       updateRows(true); // Update all edited rows
     });

     $('#btn-cancel').on('click', function() {
       updateRows(false); // Revert all edited rows
     });

     function enableRowEdit($editButton) {
       $editButton.removeClass().addClass("fa fa-envelope-o");
       var $row = $editButton.closest("tr").off("mousedown");

       $row.find("td").not(':first').not(':last').each(function(i, el) {
         enableEditText($(this))
       });

       $row.find('td:first').each(function(i, el) {
         enableEditSelect($(this))
       });
     }

     function enableEditText($cell) {
       var txt = $cell.text();
       $cell.empty().append($('<input>', {
         type: 'text',
         value: txt
       }).data('original-text', txt));
     }

     function enableEditSelect($cell) {
       var txt = $cell.text();
       $cell.empty().append($('<select>', {
         class: 'select-basic'
       }).append(options.map(function(option) {
         return $('<option>', {
           text: option.key,
           value: option.value
         })
       })).data('original-value', txt));
     }

     function updateRows(commit) {
       $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) {
         updateRow($(button), commit);
       });
     }

     function updateRow($saveButton, commit) {
       $saveButton.removeClass().addClass('fa fa-pencil-square');
       var $row = $saveButton.closest("tr");

       $row.find('td').not(':first').not(':last').each(function(i, el) {
         var $input = $(this).find('input');
         $(this).text(commit ? $input.val() : $input.data('original-text'));
       });

       $row.find('td:first').each(function(i, el) {
         var $input = $(this).find('select');
         $(this).text(commit ? $input.val() : $input.data('original-value'));
       });
     }
   });

   $(document).ready(function() {
     var url = 'http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2';
     table = $('#example2').DataTable({
       ajax: url,
       order: [
         [0, "desc"]
       ],
       rowReorder: {
         dataSrc: 'place',
         selector: 'tr'
       },
       columns: [{
         data: 'name'
       }]
     });

     table.on('mousedown', 'tbody tr', function() {
       var $row = $(this);

       var r = table.rows(function(i, data) {
         return data.name == $row.children().first().text();
       });

       if (r[0].length > 0) {
         $row.parents('table').find('tr').removeClass('highlight');
         $row.addClass('highlight');
         $('#example tr td:nth-child(2) input').addClass('border-highlight');
       }

       rowCache.push({
         row: r
       });
     });

   });

 });

 

 div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

tr.highlight td {
  background-color: #D0ECE7 !important;
}

.border-highlight {
  background-color: black !important;
  border-width: 3px;
  color: white;
}

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
    <link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

  <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>

<table id="new-row-template" style="display:none">
  <tbody>
    <tr>
      <td>999</td>
      <!-- Use a large number or row might be inserted in the middle -->
      <td>__NAME__</td>
      <td>__COUNTRY__</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>
<br>
<div class="pull-right">
  <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

<br>
<br>
<h1>
 table 2
</h1>
<br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th> name</th>
    </tr>
  </thead>
</table>

Ibrahim Khan · Accepted Answer · 2017-03-13 09:58:49Z

You can extend the function _mouseMove in $.fn.dataTable.RowReorder.prototype to disable row reorder like following.

$.extend($.fn.dataTable.RowReorder.prototype, {
    _mouseMove: function (e) {
        this._clonePosition(e);

        // Transform the mouse position into a position in the table's body
        var bodyY = this._eventToPage(e, 'Y') - this.s.bodyTop;
        var middles = this.s.middles;
        var insertPoint = null;
        var dt = this.s.dt;
        var body = dt.table().body();

        // Determine where the row should be inserted based on the mouse
        // position
        for (var i = 0, ien = middles.length; i < ien; i++) {
            if (bodyY < middles[i]) {
                insertPoint = i;
                break;
            }
        }

        if (insertPoint === null) {
            insertPoint = middles.length;
        }

        // Perform the DOM shuffle if it has changed from last time
        if (this.s.lastInsert === null || this.s.lastInsert !== insertPoint) {
            this._cachePositions();

            this.s.lastInsert = insertPoint;
        }

        this._shiftScroll(e);
    }
});

UPDATED FIDDLE

Collectives™ on Stack Overflow

Jquery Datatables stop RowReorder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related