File "code.php"

Full Path: /home/analogde/www/MDPH/01/code.php
File size: 2.51 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!--
https://www.kodingmadesimple.com/2017/12/jquery-datatables-php-mysql-ajax.html

https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/examples/initialisation/selector.html

-->

<!DOCTYPE html>
<html>
<head>
    <title>Datatables Example using PHP and MySQL</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">

    <link rel="stylesheet" type="text/css" href="https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/css/rowReorder.dataTables.css">

</head>
<body>
    <h2 style="text-align:center;">Datatables Server-Side Example</h2>

    <div id="result" class="box">
        Event result:
    </div>

    <table id="customersTable" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
   <!-- <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js" charset="utf8" type="text/javascript"></script>  -->

    <script src="https://www.ksia.or.kr/plugin/DataTables-1.10.15/media/js/jquery.dataTables.js" type="text/javascript"></script>

    <script src="https://www.ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowReorder/js/dataTables.rowReorder.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        var table = $('#customersTable').dataTable({
            "processing": true,
            rowReorder: {
            selector: 'tr'
        },
        columnDefs: [
            { targets: 0, visible: false }
        ],
            "ajax": "fetch_records.php",
            "columns": [
                {data: 'id'},
                {data: 'name'},
                {data: 'email'}
            ]
        });

        table.on('row-reorder', function (e, diff, edit) {
    let result = 'Reorder started on row: ' + edit.triggerRow.data()[1] + '<br>';
 
    for (var i = 0, ien = diff.length; i < ien; i++) {
        let rowData = table.row(diff[i].node).data();
 
        result +=
            `${rowData[1]} updated to be in position ${diff[i].newData} ` +
            `(was ${diff[i].oldData})<br>`;
    }
 
    document.querySelector('#result').innerHTML = 'Event result:<br>' + result;

    });

   
});



    </script>
</body>
</html>