Select and Sort on different header rows
Select and Sort on different header rows
lwar4d
Posts: 2Questions: 1Answers: 0
I have a DataTable that I want to have some columns filtered, some with selects, and most sortable. I have all three things going and work with my server. The problem I am having is that I can't get the sort to be on one row and the filters and selects to be on the other. I can get filters and sort to be different but selects go wherever I put the sort option.
Basically, when a dropdown is clicked it sorts for that column. Then when something is selected it sorts the other way.
I have tried setting the html to already have the sortable class, setting a class on the select creation, I even tried setting orderCellsTop to True and bSortCellsTop to false hoping that one would still use the old way.
Here is what I have currently:
$(document).ready(function(){
$('#recordListing thead tr')
.clone(true)
.addClass('sort')
.removeClass('filters')
.appendTo('#recordListing thead');
var dataRecords = $('#recordListing').DataTable({
"processing":true,
"serverSide":true,
'processing': true,
'serverSide': true,
'serverMethod': 'post',
stateSave: true,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'All']
],
"order":[],
"ajax":{
url:"ajax_action.php",
type:"POST",
data:{action:'listRecords'},
dataType:"json"
},
"columnDefs":[
{ "width": "3%", "targets": 0 },
{
"targets":[0, 7],
"orderable":false,
},
],
"searching": true,
orderCellsTop: false,
fixedHeader: true,
bSortCellsTop:false,
initComplete: function () {
var api = this.api();
var cols = [2,5,6];
// For each column
api
.columns([1,3])
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
//if (jQuery.inArray($(api.column(colIdx).header()).index(), cols) !== -1) {
$(cell).html('<input type="text" style="width:100%;" placeholder="' + title + '" />');
//}
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '{search}'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', this.value)
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
this.api()
.columns(cols)
.every(function () {
let column = this;
// Create select element
let select = document.createElement('select');
select.add(new Option(''));
column.header('.filters .select th').replaceChildren(select);
// Apply listener for user change in value
select.addEventListener('change', function () {
var val = DataTable.util.escapeRegex(select.value);
column
.search(val ? val : '', true, false)
.draw();
});
if (column.index()==2){
select.add(new Option('Accessible'));
select.add(new Option('Unaccessible'));
}
if (column.index()==5){
select.add(new Option('AP'));
select.add(new Option('Server'));
select.add(new Option('Switch'));
select.add(new Option('URL'));
}
if (column.index()==6){
select.add(new Option('Jefferson'));
select.add(new Option('Mequon'));
select.add(new Option('Pittsburg'));
}
});
},
});
$('#clearFilter').click(function(){
var table = $('#recordListing').DataTable();
table.search('');
table.columns().search('').draw();
});
$('#addRecord').click(function(){
clearInterval(intervalId);
$('#recordModal').modal('show');
$('#recordForm')[0].reset();
$('.modal-title').html("<i class='fa fa-plus'></i> Add Record");
$('#action').val('addRecord');
$('#save').val('Add');
});
$("#recordListing").on('click', '.update', function(){
clearInterval(intervalId);
var id = $(this).attr("id");
var action = 'getRecord';
$.ajax({
url:'ajax_action.php',
method:"POST",
data:{id:id, action:action},
dataType:"json",
success:function(data){
$('#recordModal').modal('show');
$('#id').val(data.id);
$('#name').val(data.name);
$('#ip').val(data.ip);
$('#type').val(data.type);
$('#location').val(data.location);
$('.modal-title').html("<i class='fa fa-plus'></i> Edit Device");
$('#action').val('updateRecord');
$('#save').val('Save');
}
})
});
$("#recordModal").on('submit','#recordForm', function(event){
event.preventDefault();
$('#save').attr('disabled','disabled');
var formData = $(this).serialize();
$.ajax({
url:"ajax_action.php",
method:"POST",
data:formData,
success:function(data){
$('#recordForm')[0].reset();
$('#recordModal').modal('hide');
$('#save').attr('disabled', false);
dataRecords.ajax.reload();
intervalId = setInterval(myFunction, 300000);
}
})
});
$("#recordListing").on('click', '.delete', function(){
var id = $(this).attr("id");
var action = "deleteRecord";
if(confirm("Are you sure you want to delete this record?")) {
$.ajax({
url:"ajax_action.php",
method:"POST",
data:{id:id, action:action},
success:function(data) {
dataRecords.ajax.reload();
intervalId = setInterval(myFunction, 300000);
}
})
} else {
return false;
}
});
function myFunction() {
dataRecords.ajax.reload();
}
let intervalId = setInterval(myFunction, 300000);
});
This question has an accepted answers - jump to answer
Answers
According to the Legacy conversion guide to 1.10
bSortCellsTopandorderCellsTopare the same thing. If you set both one will override the other.The problem is that the
column().header()will use the same header row thatorderCellsTopuses. See if this example helps:https://live.datatables.net/buziligu/1/edit
Kevin
Thanks. That got me going in the right direction.