JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<link rel="stylesheet" href="ttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.cs"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.j"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.jqueryui.min.js"></script>
 <div>
        <div style="width: 100%; float: left; padding: 10px">
            <strong><u>Sample Table</u></strong>
            <table class="table table-striped table-bordered table-hover" id="dt_mytable">
                <thead>
                    <tr>
                        <th>Column1 Heading</th>
                        <th>Column2 Heading</th>
                        <th>Column3 Heading</th>
                        <th>Column4 Heading</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 0 Column 1</td>
                        <td>Row 0 Column 2</td>
                        <td>Row 0 Column 3</td>
                        <td>Row 0 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 1 Column 1</td>
                        <td>Row 1 Column 2</td>
                        <td>Row 1 Column 3</td>
                        <td>Row 1 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 2 Column 1</td>
                        <td>Row 2 Column 2</td>
                        <td>Row 2 Column 3</td>
   ...

JavaScript

var oTable_original_data;
    $(document).ready(function ()
    {

        $('#dt_unbinded_machines').DataTable({
            "select": true,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "order": [[1, "asc"]],  //Order by the Machine binding Status
            "columnDefs": [
                {
                    "targets": [0], //Hide the first column of idmachine
                    "visible": false,
                    'searchable': false,
                    'serverSide': false,
                }
                //{
                    //'targets': 1, //Disable searching on the idmachine column
                    //'searchable': false
                //},
            ],
        });


        $('#dt_binded_machines').DataTable({
            "select": true,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "order": [[1, "asc"]]   //Order by the Machine binding Status
        });

        oTable_original_data = $('#dt_mytable').DataTable().rows().data();
    });//Close Document Ready Function

    function submit_table_data()
    {
        //alert("Function submit_table_data called");
        var oTable = $('#dt_mytable').DataTable();

        $('#dt_mytable').submit();
        var row_data = oTable.rows().data();
        debugger;
        alert(row_data)

        // Submit form data via ajax
        $.ajax({
            type: 'POST',
            url: '/TheController/Function',
            data:
            {
                "row_data": JSON.stringify(row_data)
            },
            success: function (result) {
                //do something
                //alert("Sucesss" + data);
            }
        });
    };