I dont know how to to merge the function of my current attibutes of responsive and fixed header etc with Show "All" list function like it has in this one https://datatables.net/examples/advanced_init/length_menu.html
I dont know how to do it pls help here is my current function
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
paging: false,
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
i am unable to merge the function with show "All" page length menu in javascript please help.
also please allow me run snippet im very new to js
thank you
var table = $('#example').DataTable({
responsive: true,
paging: false,
// Add this line
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);
Related
In This Image My image Pagination design is shown
I want design like that
My Java script code
$(document).ready(function () {
$('#AllUsers').DataTable({
processing: true, // for show progress bar
serverSide: false, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: false, // for disable multiple column at once
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
});
});
I am using jQuery DataTables and it's working well. I just want to show a text message while the table is being initialized.
I am not using server side.
How can I do it?
$(document).ready(function() {
$(".table").DataTable({
"bFilter": true,
"lengthMenu": [ 10, 25, 50, 75, 100, 150, 200, 500, 1000 ],
"columnDefs": [{ targets: 'no-sort', orderable: false }],
"pageLength": 50,
"language": {
"processing": "Loading..."
},
"initComplete": () => {
$(".table").show();
}
});
});
I tried with preinit but no luck, and I also do not want to keep displaying the html if there is no request for datatables, something like beforesend.
I would like to access the dropdown list for length display of the jQuery Datatable before the data is loaded in the table, i have a problem that whenever the user select the lenght of records to display in the table , the table resize and trigger window.resize() and i want to access the dropdown list after the table initialization but before the data is loaded, here is what i trying to do but it doesn't work.
let table = $('#data-table').DataTable();
$(document).on('preInit.dt', function (e, settings)
{
$('select[name=data-table_length]').click(function ()
{
console.log('dropdown selected');
window_resize = false;
});
});
table = $('#data-table').DataTable({
destroy: true,
serverSide: false,
autoWidth: false,
paging: true,
order: [[1, 'asc']],
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
ajax: {
url: '/Observer/GetActiveClientsByProfileId',
type: 'POST',
data: {
ProfileId: profileId
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
]
});
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
var counter = 0;
function staticVar()
{
if (staticVar.counter == undefined)
{
staticVar.counter = 1
}
else
{
staticVar.counter++
}
return staticVar.counter;
}
//Our table has horizontal and vertical scroll bars and the first columni.e, the serial number will be fixed when scrolling
$(document).ready(function() {
var download_file_counter= staticVar();
var table = $('#example').DataTable({
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0] }],
scrollY: '40vh',
scrollX: '40vh',
paging: true,
pageLength: 20,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Bflrtip',
buttons: [{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'colvis',
className: 'colvisButton'
},
{
extend: 'excelHtml5',
title: 'LicenseDetails_'+(++download_file_counter)+'_'+today,
text: 'Excel',
exportOptions: {
modifier: {
page: 'current'
}
}
}],
columnDefs: [{
targets: -1,
visible: false,
orderable: false
}],
order: [[ 1, 'asc' ]]
});
download_file_counter= makeCounter();
$('#start-date, #end-date').change(function () {
table.draw();
});
$('#start-date1, #end-date1').change(function () {
table.draw();
});
$('#start-date2, #end-date2').change(function () {
table.draw();
});
});
This is my javascript code I want to pass the counter variable to the filename on clicking of the excel button. The counter is not incrementing for onclick of that.