Tutorial Site datatables
https://wiki.chongtin.com/
2026-04-08T22:19:07+00:00Tutorial Site
https://wiki.chongtin.com/
https://wiki.chongtin.com/ttps://wiki.chongtin.com/lib/tpl/bootstrap3/images/favicon.icotext/html2019-11-12T17:24:40+00:00Anonymous (anonymous@undisclosed.example.com)DataTables Ajax Request Data
https://wiki.chongtin.com/datatables/datatables_ajax_request_data?do=revisions&rev=1573550680
DataTables Ajax Request Data
Frontend
HTML:
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-12">
<table id="table-list" class="display" style="width: 100%">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
<th>col 5</th>
<th>col 6</th>
<th>col 7</th>
…text/html2018-10-24T11:35:04+00:00Anonymous (anonymous@undisclosed.example.com)DataTables - The Basic
https://wiki.chongtin.com/datatables/datatables_basic?do=revisions&rev=1540352104
DataTables - The Basic
* Download datatables from <https://datatables.net/download/>. Here we use the DataTables style.
* jQuery are required for datatables. We use jQuery 2.2.0.
* Link style sheet datatables.min.css in your HTML
* Add the datatables.min.js into your HTML
*text/html2019-11-11T14:19:14+00:00Anonymous (anonymous@undisclosed.example.com)DataTables Rendering Column with Row Data
https://wiki.chongtin.com/datatables/datatables_rendering_column_with_row_data?do=revisions&rev=1573453154
DataTables Rendering Column with Row Data
It is possible for us to customize how the column is begin render by using columnDefs like:
var table = $("#table").DataTable({
dom: 'rti',
pageLength: -1,
order: [[0, "asc"]],
columnDefs: [
{
"targets": 0,
"render": function (data, type, row) {
if (data === "Active") {
return '<span class="active">Active</span>';
}
els…text/html2018-10-24T12:30:12+00:00Anonymous (anonymous@undisclosed.example.com)DataTables Set Column Width
https://wiki.chongtin.com/datatables/datatables_set_column_width?do=revisions&rev=1540355412
DataTables Set Column Width
There are two ways to do so.
Method 1: Set it directly in HTML Tag
Just set it directly in the HTML tag with the word width. The following example set the width in the table header fields.
<table id="my-table" class="display">
<thead>
<tr>
<th width="15%">Header 1</th>
<th width="15%">Header 2</th>
<th width="70%">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>r1 c1</td>
<td>r1 c2</td>
<td>r1 …