Skip to content

Instantly share code, notes, and snippets.

@kupriashov
Last active April 30, 2020 00:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kupriashov/684e4c0aba78e4fea033331246161ec2 to your computer and use it in GitHub Desktop.
Save kupriashov/684e4c0aba78e4fea033331246161ec2 to your computer and use it in GitHub Desktop.
MDB Support - DataTable Server Side Broken Switch
<table id="dtTable" class="table table-striped table-hover text-center" cellspacing="0" width="100%">
<thead class="table-bordered">
<tr>
<th class="th-min"></th>
<th class="th-min">Код</th>
<th>Страна</th>
<th>CTM ID</th>
<th>Используется</th>
</tr>
</thead>
</table>
$(document).ready(function () {
$('#dtTable').DataTable(
processing: true,
serverSide: true,
ajax: `/api/dt/countries/?user_session=${getCookie('session')}`,
language: {
url: `//cdn.datatables.net/plug-ins/1.10.20/i18n/Russian.json`,
},
pageLength: 25,
drawCallback: function() {
$('#dtTable_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtTable_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtTable_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtTable_wrapper .dataTables_filter').addClass('md-form');
$('#dtTable_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtTable_wrapper select').addClass('mdb-select');
$('#dtTable_wrapper .mdb-select').materialSelect();
$('#dtTable_wrapper .dataTables_filter').find('label').remove();
//If I replace cell's html with the same html after this line, the switches are rendered OK
},
);
});
{
"draw": 0,
"recordsTotal": 106,
"recordsFiltered": 106,
"data": [
{
"0": "/static/img/flags/au.png",
"1": "AU",
"2": "Австралия",
"3": "0",
"4": "<div class=\"switch\"><label><input type=\"checkbox\" data-admin-set-country-used=\"4\"><span class=\"lever\"></span></label></div>",
"-1": "4"
},
{
"0": "/static/img/flags/at.png",
"1": "AT",
"2": "Австрия",
"3": "0",
"4": "<div class=\"switch\"><label><input type=\"checkbox\" data-admin-set-country-used=\"63\"><span class=\"lever\"></span></label></div>",
"-1": "63"
},
{
"0": "/static/img/flags/az.png",
"1": "AZ",
"2": "Азербайджан",
"3": "0",
"4": "<div class=\"switch\"><label><input type=\"checkbox\" data-admin-set-country-used=\"81\"><span class=\"lever\"></span></label></div>",
"-1": "81"
}
]
}
<?php
$_PERMISSIONS['allowed_roles'] = "admin,superadmin";
$_DATATABLE = true;
include_once(INCLUDE_PATH . 'permissions.php');
$columns = array(
array('db' => 'country_id', 'dt' => -1),
array(
'db' => 'country_flag_image',
'dt' => 0,
'formatter' => function ($val, $row) {
return $val;
}
),
array(
'db' => 'country_code',
'dt' => 1,
'formatter' => function ($val, $row) {
return $val;
}
),
array(
'db' => 'country_name',
'dt' => 2,
'formatter' => function ($val, $row) {
return $val;
}
),
array(
'db' => 'country_ctm_id',
'dt' => 3,
'formatter' => function ($val, $row) {
return $val;
}
),
array(
'db' => 'used',
'dt' => 4,
'formatter' => function ($val, $row) {
return '
<div class="switch">
<label>
<input type="checkbox"' . ($val ? ' checked' : '') . '>
<span class="lever"></span>
</label>
</div>
';
}
),
);
$_RESPONSE['data'] = SSP::custom('geo_countries', 'country_id', $columns);
include_once(INCLUDE_PATH . 'end.php');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment