Script DataTable


JS

Script DataTable

หัวตาราง 1 1 หัวตาราง 1 2 หัวตาราง 1 3 หัวตาราง 1 4 หัวตาราง 1 5
เนื้อหา แถว 2 คอลัมน์ 1 เนื้อหา แถว 2 คอลัมน์ 2 เนื้อหา แถว 2 คอลัมน์ 3 เนื้อหา แถว 2 คอลัมน์ 4 เนื้อหา แถว 2 คอลัมน์ 5
เนื้อหา แถว 3 คอลัมน์ 1 เนื้อหา แถว 3 คอลัมน์ 2 เนื้อหา แถว 3 คอลัมน์ 3 เนื้อหา แถว 3 คอลัมน์ 4 เนื้อหา แถว 3 คอลัมน์ 5
เนื้อหา แถว 4 คอลัมน์ 1 เนื้อหา แถว 4 คอลัมน์ 2 เนื้อหา แถว 4 คอลัมน์ 3 เนื้อหา แถว 4 คอลัมน์ 4 เนื้อหา แถว 4 คอลัมน์ 5
เนื้อหา แถว 5 คอลัมน์ 1 เนื้อหา แถว 5 คอลัมน์ 2 เนื้อหา แถว 5 คอลัมน์ 3 เนื้อหา แถว 5 คอลัมน์ 4 เนื้อหา แถว 5 คอลัมน์ 5
เนื้อหา แถว 6 คอลัมน์ 1 เนื้อหา แถว 6 คอลัมน์ 2 เนื้อหา แถว 6 คอลัมน์ 3 เนื้อหา แถว 6 คอลัมน์ 4 เนื้อหา แถว 6 คอลัมน์ 5
เนื้อหา แถว 7 คอลัมน์ 1 เนื้อหา แถว 7 คอลัมน์ 2 เนื้อหา แถว 7 คอลัมน์ 3 เนื้อหา แถว 7 คอลัมน์ 4 เนื้อหา แถว 7 คอลัมน์ 5
เนื้อหา แถว 8 คอลัมน์ 1 เนื้อหา แถว 8 คอลัมน์ 2 เนื้อหา แถว 8 คอลัมน์ 3 เนื้อหา แถว 8 คอลัมน์ 4 เนื้อหา แถว 8 คอลัมน์ 5
เนื้อหา แถว 9 คอลัมน์ 1 เนื้อหา แถว 9 คอลัมน์ 2 เนื้อหา แถว 9 คอลัมน์ 3 เนื้อหา แถว 9 คอลัมน์ 4 เนื้อหา แถว 9 คอลัมน์ 5
เนื้อหา แถว 10 คอลัมน์ 1 เนื้อหา แถว 10 คอลัมน์ 2 เนื้อหา แถว 10 คอลัมน์ 3 เนื้อหา แถว 10 คอลัมน์ 4 เนื้อหา แถว 10 คอลัมน์ 5
เนื้อหา แถว 11 คอลัมน์ 1 เนื้อหา แถว 11 คอลัมน์ 2 เนื้อหา แถว 11 คอลัมน์ 3 เนื้อหา แถว 11 คอลัมน์ 4 เนื้อหา แถว 11 คอลัมน์ 5
เนื้อหา แถว 12 คอลัมน์ 1 เนื้อหา แถว 12 คอลัมน์ 2 เนื้อหา แถว 12 คอลัมน์ 3 เนื้อหา แถว 12 คอลัมน์ 4 เนื้อหา แถว 12 คอลัมน์ 5
เนื้อหา แถว 13 คอลัมน์ 1 เนื้อหา แถว 13 คอลัมน์ 2 เนื้อหา แถว 13 คอลัมน์ 3 เนื้อหา แถว 13 คอลัมน์ 4 เนื้อหา แถว 13 คอลัมน์ 5
เนื้อหา แถว 14 คอลัมน์ 1 เนื้อหา แถว 14 คอลัมน์ 2 เนื้อหา แถว 14 คอลัมน์ 3 เนื้อหา แถว 14 คอลัมน์ 4 เนื้อหา แถว 14 คอลัมน์ 5
เนื้อหา แถว 15 คอลัมน์ 1 เนื้อหา แถว 15 คอลัมน์ 2 เนื้อหา แถว 15 คอลัมน์ 3 เนื้อหา แถว 15 คอลัมน์ 4 เนื้อหา แถว 15 คอลัมน์ 5
เนื้อหา แถว 16 คอลัมน์ 1 เนื้อหา แถว 16 คอลัมน์ 2 เนื้อหา แถว 16 คอลัมน์ 3 เนื้อหา แถว 16 คอลัมน์ 4 เนื้อหา แถว 16 คอลัมน์ 5
เนื้อหา แถว 17 คอลัมน์ 1 เนื้อหา แถว 17 คอลัมน์ 2 เนื้อหา แถว 17 คอลัมน์ 3 เนื้อหา แถว 17 คอลัมน์ 4 เนื้อหา แถว 17 คอลัมน์ 5
เนื้อหา แถว 18 คอลัมน์ 1 เนื้อหา แถว 18 คอลัมน์ 2 เนื้อหา แถว 18 คอลัมน์ 3 เนื้อหา แถว 18 คอลัมน์ 4 เนื้อหา แถว 18 คอลัมน์ 5
เนื้อหา แถว 19 คอลัมน์ 1 เนื้อหา แถว 19 คอลัมน์ 2 เนื้อหา แถว 19 คอลัมน์ 3 เนื้อหา แถว 19 คอลัมน์ 4 เนื้อหา แถว 19 คอลัมน์ 5
เนื้อหา แถว 20 คอลัมน์ 1 เนื้อหา แถว 20 คอลัมน์ 2 เนื้อหา แถว 20 คอลัมน์ 3 เนื้อหา แถว 20 คอลัมน์ 4 เนื้อหา แถว 20 คอลัมน์ 5
เนื้อหา แถว 21 คอลัมน์ 1 เนื้อหา แถว 21 คอลัมน์ 2 เนื้อหา แถว 21 คอลัมน์ 3 เนื้อหา แถว 21 คอลัมน์ 4 เนื้อหา แถว 21 คอลัมน์ 5
เนื้อหา แถว 22 คอลัมน์ 1 เนื้อหา แถว 22 คอลัมน์ 2 เนื้อหา แถว 22 คอลัมน์ 3 เนื้อหา แถว 22 คอลัมน์ 4 เนื้อหา แถว 22 คอลัมน์ 5
เนื้อหา แถว 23 คอลัมน์ 1 เนื้อหา แถว 23 คอลัมน์ 2 เนื้อหา แถว 23 คอลัมน์ 3 เนื้อหา แถว 23 คอลัมน์ 4 เนื้อหา แถว 23 คอลัมน์ 5
เนื้อหา แถว 24 คอลัมน์ 1 เนื้อหา แถว 24 คอลัมน์ 2 เนื้อหา แถว 24 คอลัมน์ 3 เนื้อหา แถว 24 คอลัมน์ 4 เนื้อหา แถว 24 คอลัมน์ 5
เนื้อหา แถว 25 คอลัมน์ 1 เนื้อหา แถว 25 คอลัมน์ 2 เนื้อหา แถว 25 คอลัมน์ 3 เนื้อหา แถว 25 คอลัมน์ 4 เนื้อหา แถว 25 คอลัมน์ 5
เนื้อหา แถว 26 คอลัมน์ 1 เนื้อหา แถว 26 คอลัมน์ 2 เนื้อหา แถว 26 คอลัมน์ 3 เนื้อหา แถว 26 คอลัมน์ 4 เนื้อหา แถว 26 คอลัมน์ 5
เนื้อหา แถว 27 คอลัมน์ 1 เนื้อหา แถว 27 คอลัมน์ 2 เนื้อหา แถว 27 คอลัมน์ 3 เนื้อหา แถว 27 คอลัมน์ 4 เนื้อหา แถว 27 คอลัมน์ 5
เนื้อหา แถว 28 คอลัมน์ 1 เนื้อหา แถว 28 คอลัมน์ 2 เนื้อหา แถว 28 คอลัมน์ 3 เนื้อหา แถว 28 คอลัมน์ 4 เนื้อหา แถว 28 คอลัมน์ 5
เนื้อหา แถว 29 คอลัมน์ 1 เนื้อหา แถว 29 คอลัมน์ 2 เนื้อหา แถว 29 คอลัมน์ 3 เนื้อหา แถว 29 คอลัมน์ 4 เนื้อหา แถว 29 คอลัมน์ 5

ตัวอย่าง DataTable


<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css" />
<table id="tblUser" width="90%">
    <thead>
        <tr>
            <th>หัวตาราง 1 1</th>
            <th>หัวตาราง 1 2</th>
            <th>หัวตาราง 1 3</th>
            <th>หัวตาราง 1 4</th>
            <th>หัวตาราง 1 5</th>
        </tr>
    </thead>
    <tbody>
        <?php
            for($i=2;$i<30;$i++){
        ?>
            <tr>
                <?php
                    for($j=1;$j<6;$j++){
                ?>
                    <td>เนื้อหา แถว <?php echo $i . " คอลัมน์ " . $j; ?></td>
                <?php
                    }
                ?>
            </tr>
        <?php
            }
        ?>
    </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('#tblUser').DataTable();
    } );

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#data_news_img").change(function(){
        readURL(this);
    });
</script>