Data table fixed columns.

**ต้อง import library คือ

bootstrap4
dataTables.bootstrap4.css
jquery.dataTables.js
dataTables.bootstrap4.js

เพิ่ม Library สำหรับ data table fixed columns.

Example Code Html.
<div class=”container”>
    <div class=”row”>
        <div class=”col-12 mt-5″>
            <div class=”dataTable_wrapper”>
                <table id=”tableView” class=”table table-bordered table-striped table-hover table-ellipsis table-fixed bg-white” style=”width:100%”>
                    <thead>
                    <tr>
                        <th width=”100px”>First name</th>
                        <th width=”100px”>Last name</th>
                        <th width=”100px”>Position</th>
                        <th width=”100px”>Office</th>
                        <th width=”100px”>Age</th>
                        <th width=”250px”>Start date</th>
                        <th width=”100px”>Salary</th>
                        <th width=”100px”>Extn.</th>
                        <th width=”300px”>E-mail</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Tiger</td>
                        <td>Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett</td>
                        <td>Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Code JQuery.
<script>
$(document).ready(function(){
var datatable = $(‘#tableView’).DataTable( {
“pageLength”: 25,
“scrollX”: true,
“scrollCollapse”: true,
“paging”: true,
“fixedColumns”: {
“leftColumns”: 2,
}
});
});
</script>

fixedColumns – เพื่อเปิดการ fixed columns
fixedColumns : true, // เปิด fixed columns จะ fixed คอลัมน์ตำแหน่งที่ 1

หรือ
fixedColumns : {

“leftColumns”:2, // fixed columns 2 ตำแหน่งนับจากซ้ายไปขวา

“rigthColumns”:2 // fixed columns 2 ตำแหน่งนับจากขวาไปซ้าย

}

ศึกษาเพิ่มเติม :

https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html

suttipong.j