datatable02-views

<?php
//this is demo_datatable view
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="<?= base_url(); ?>media/css/jquery.dataTables.css" rel="stylesheet" />
    </head>
    <body>
        <h1>PROVINCE</h1>
        <div style="margin-left: 10px; width: 90%;">
            <table class="dt_table" >
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Kode</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    for ($i = 1; $i < 2; $i++) {
                        ?>
                        <tr>
                            <td><?= $i; ?></td>
                            <td>Code <?= $i; ?></td>
                            <td>Name for <?= $i; ?></td>
                            <td><button>Edit</button></td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>

            </table>
        </div>
        <script src='<?= base_url(); ?>media/js/jquery1.11.3.js'></script>
        <script src='<?= base_url(); ?>media/js/datatables.min.js'></script>
        <script>
            var table;
            var url_target = "<?= site_url('demo/ajax_data'); ?>";
            $(document).ready(function () {

                //datatables clasic
                //table = $('.dt_table').DataTable();
                table = $('.dt_table').DataTable({"processing": true, //Feature control the processing indicator.
                    "serverSide": true, //Feature control DataTables' server-side processing mode.
                    "order": [], //Initial no order.// Load data for the table's content from an Ajax source
                    "ajax": {
                        "url": url_target,
                        "type": "POST"
                    },

                    //Set column definition initialisation properties.

                    "columns": [
                        {"orderable": false},
                        {},
                        {},
                        {"orderable": false}
                    ],
                    "lengthMenu": [[3, 5, 7, 10, 25, 50, 62], ["Tiga", "Lima", 7, 10, 25, 50, "62"]],

                });

            });
        </script>
    </body>
</html>