DataTable ```Record``` Shown inproper format
DataTable ```Record``` Shown inproper format
ASIF4394
Posts: 6Questions: 1Answers: 0
hi....
When i filter a Record and shown in Datatable the record is Shown in inproper format
please help for the same.
thanks in advance.
i want like this
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi Asif4394,
You must be doing something odd with the headers for them not to be aligned, plus the checkbox suggests something odd.
Can you provide your code, please, preferably in a live example, then we can take a look.
Cheers,
Colin
p.s. i deleted your other thread as it was a duplicate of this one.
function updateDataTableSelectAllCtrl(table) {
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
if ($chkbox_checked.length === 0)
{
chkbox_select_all.checked = false;
if ('indeterminate' in chkbox_select_all)
{
chkbox_select_all.indeterminate = false;
}
} else if ($chkbox_checked.length === $chkbox_all.length)
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
} else
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = true;
}
}
}
this is my JS code =>
function updateDataTableSelectAllCtrl(table) {
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
if ($chkbox_checked.length === 0)
{
chkbox_select_all.checked = false;
if ('indeterminate' in chkbox_select_all)
{
chkbox_select_all.indeterminate = false;
}
} else if ($chkbox_checked.length === $chkbox_all.length)
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
} else
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = true;
}
}
}
function updateDataTableSelectAllCtrl(table) {
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
if ($chkbox_checked.length === 0)
{
chkbox_select_all.checked = false;
if ('indeterminate' in chkbox_select_all)
{
chkbox_select_all.indeterminate = false;
}
} else if ($chkbox_checked.length === $chkbox_all.length)
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
} else
{
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = true;
}
}
}
$(document).ready(function () {
$('.company_scrollbox, .city_scrollbox').enscroll();
var rows_selected = [];
var table = $('#instructor_management').DataTable({
"bProcessing": true,
"dom": '<"top_tabel"Bpl>rt<"clear">',
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, labels.LBL_ALL_TEXT]],
"scrollY": "510px",
"scrollCollapse": false,
"responsive": true,
'serverSide': true,
"ordering": true,
"bInfo": false,
buttons: [
{
extend: 'csv',
footer: false,
exportOptions: {
columns: [1, 2, 3, 4, 5, 6]
}
}
],
language: {
"sSearch": "",
"url": ADMIN_URL + "assets/js/swedish.json"
},
"bDeferRender": true,
'fnCreatedRow': function (nRow, aData, iDataIndex) {
$(nRow).attr('instructorID', aData[0]);
},
"fnPreDrawCallback": function (oSettings) {
$('#datatable-responsive').css('opacity', '0.2');
$('input[type="search"]').css('display', 'none');
},
"fnDrawCallback": function () {
$('#datatable-responsive').css('opacity', '1');
$('#datatable-responsive_wrapper .row').css('margin', '0');
$('.dataTables_length select').addClass('lenthcls');
$('.lenthcls').select2({minimumResultsForSearch: -1});
$(document).on('click', '#btnDeleteRow', function () {
var id = $(this).attr('data-id');
var $this = $(this);
swal({
title: labels.LBL_SWAL_TITLE,
text: labels.LBL_SWAL_TEXT,
type: 'warning',
showCancelButton: true,
confirmButtonText: labels.LBL_SWAL_CONFIRMBUTTONTEXT,
cancelButtonText: labels.LBL_SWAL_CANCELBUTTONTEXT,
cancelButtonClass: 'btn btn-danger',
confirmButtonColor: '#f26c4f',
confirmButtonClass: 'custom-button',
customClass: 'custom-backcolor',
reverseButtons: true
}).then((result) => {
if (result == true)
{
$.ajax({
url: ADMIN_URL + "instructor/delete",
method: "POST",
type: "POST",
data: {iInstructorID: id},
success: function (data)
{
if (data == 1)
{
$this.closest("tr").remove();
var i = parseInt($(".instructor_cnt").text());
i--;
$(".count").text(i);
var id1 = $this.attr('data-id');
console.log(id1);
var id2 = "";
$(".inst_delete").each(function (i, j) {
id2 += $(this).attr('data-id') + " ";
});
$(".inst_delete").each(function (i, j) {
if ($(this).attr('data-id') == id1)
{
$(this).remove();
}
});
swal(labels.LBL_SWAL_SUCCESS_MSG1, labels.LBL_SWAL_SUCCESS_MSG2, "success");
} else
{
swal(labels.LBL_SWAL_ERROR_MSG1, labels.LBL_SWAL_ERROR_MSG2, "error");
}
}
});
}
})
});
},
'order': [0, 'desc'],
'columnDefs': [{
'targets': 0,
'bSortable': false,
'aTargets': [0, 1, 2],
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox">';
}
}],
"aoColumns": [
{"bSearchable": false},
null,
null,
{"bSearchable": false},
null,
null,
null,
null
],
"ajax": $.fn.DataTable.pipeline({
url: ADMIN_URL + "Instructor/lists"
})
});
Thanks for that code, nothing stands out as being wrong in there. It might be a CSS issue - would you be able to provide a link to a page that shows this problem?
yes Dear....
you are Right.. , that's problem in a CSS and it's solved .