CURD2

by bvotcode

HTML

<!DOCTYPE html>
<html>

<head>
<meta name="description" content="[CRUD ok2]">
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="dataTables.rowReorder.js"></script>
  <link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


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

<body>
  <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="newRow" style="display:none">
    <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>


  <script>
    $(document).ready(function() {

      var table;

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

     ...

JavaScript

/*! RowReorder 1.2.0
 * 2015-2016 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     RowReorder
 * @description Row reordering extension for DataTables
 * @version     1.2.0
 * @file        dataTables.rowReorder.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2015-2016 SpryMedia Ltd.
 *
 * This source file is free software, available under the following license:
 *   MIT license - http://datatables.net/license/mit
 *
 * This source file is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 *
 * For details please refer to: http://www.datatables.net
 */

(function( factory ){
	if ( typeof define === 'function' && define.amd ) {
		// AMD
		define( ['jquery', 'datatables.net'], function ( $ ) {
			return factory( $, window, document );
		} );
	}
	else if ( typeof exports === 'object' ) {
		// CommonJS
		module.exports = function (root, $) {
			if ( ! root ) {
				root = window;
			}

			if ( ! $ || ! $.fn.dataTable ) {
				$ = require('datatables.net')(root, $).$;
			}

			return factory( $, root, root.document );
		};
	}
	else {
		// Browser
		factory( jQuery, window, document );
	}
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;


/**
 * RowReorder provides the ability in DataTables to click and drag rows to
 * reorder them. When a row is dropped the data for the rows effected will be
 * updated to reflect the change. Normally this data point should also be the
 * column being sorted upon in the DataTable but this does not need to be the
 * case. RowReorder implements a "data swap" method - so the rows being
 * reordered take the value of the data point from the row that used to occupy
 * the row's new position.
 *
 * Initialisation is done by either:
 *
 * * `rowReorder`...