How to load datatable on button click or dropdown change ?
How to load datatable on button click or dropdown change ?
arsalansiddiqui
Posts: 128Questions: 15Answers: 0
Description of problem:
I want to load datatable on buton click or dropdown change, will it be like normal ajax submit or something else. if i do ajax way will go from one page to another does not resets form ?
I do a search and found that i have to submit form on each event, is it required or there is a simple way to do it ?
This discussion has been closed.
Answers
I'm seeing reinitialisation alert
my code
`function transaction(){
var lc_dt = $('#lc_dt').DataTable({
dom: '<Bf<tr>pl>',
"lengthMenu": [[10, 50, 100, 200, 300], [10, 50, 100, 200, 300]],
pageLength:10,
"processing":true,
"serverSide":true,
responsive:true,
//stateSave:true,
"deferRender":true,
language:{
//processing: '
',
oPaginate: {
sNext: '<i class="material-icons">arrow_forward</i>',
sPrevious: '<i class="material-icons">arrow_back</i>',
sFirst: '<i class="material-icons">first_page</i>',
sLast: '<i class="material-icons">last_page</i>'
}
},
"ajax":{
url :"../b_p/managers_transactions.php",
type: "GET",
/* "data":{
"filterValue":filterValue
}, */
data: function(d){
var value= $('#pmis').val();
if(value === undefined){
value= defFltrVal;
}
d.filterValue = value;
},
error: function(){
console.log("something went wrong");
}
},
"aoColumns":[
{ "data": "", orderable: false, searchable: false },
{ "data": "c" },
{ "data": "d" },
{ "data": "j" },
{ "data": "j" },
{ "data": "j" },
{ "data": "j" },
{ "data": "", orderable: false, searchable: false, "render": function(data, type, row, meta){
//return '<a href="customer/' + row['id'] + '/edit" onclick="openMenuModal()" >Edit</a>
//return '<a class="btn bg-teal" onclick="" data-toggle="modal" data-target="#menuModal" >Menu</a>';
return '
';
}},
],//aoColumns:END
"columnDefs":[
{ responsivePriority: 1, targets: 0 },
//{ responsivePriority: 2, targets: 1 },
//{ responsivePriority: 3, targets: 8 },
//{ responsivePriority: 4, targets: 9 },
//{ responsivePriority: 10001, targets: 5 },
//{ responsivePriority: 10002, targets: 7 }
//{ responsivePriority: 10003, targets: 4 }
//{
//"targets": 7, "render": function(data, type, row, meta){
//return '<a href="customer/' + row['id'] + '/edit" onclick="openMenuModal()" >Edit</a>
//return '<a class="btn bg-teal" onclick="" data-toggle="modal" data-target="#menuModal" >Menu</a>';
//}
//}
],
"order": [[ 1, 'asc' ]],
autoWidth:false,
/* "initComplete": function (settings, json){
$('#totalRecordsCount').val(json.recordsTotal);
}, */
buttons:[
{extend: 'print', text: 'Print', titleAttr: 'Print'},
{extend: 'copy', text: 'Copy', titleAttr: 'Copy'},
{extend: 'excel', text: 'Excel',titleAttr: 'Excel',className: 'excelButton'},
{extend: 'pdf', exportOptions: { columns: [1, 2] }, text: 'Pdf',
// titleAttr: 'PDF'
},
{extend: 'csv', text: 'Csv', titleAttr: 'Csv'},
{
text: 'Reload', action: function ( e, dt, node, config ){
lc_dt.ajax.reload(null,false);//lc_dt.ajax.reload();
}
},
{text: 'Expand All', action: function ( e, dt, node, config ){
lc_dt.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
}},
{text: 'Collapse All', action: function ( e, dt, node, config ){
lc_dt.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
}},
//{text: 'Show All',action: function ( e, dt, node, config ){lc_dt.page.len( -1 ).draw();}},
{
extend: 'colvis',
//text: '<i class="material-icons">view_column</i> Column',
text: '<span class="colvis"> Column</span>',
//columns: [0, 1, 2, 3],
columnText: function ( dt, idx, title ){
return (idx+1)+': '+title;
}
}
]//BUTTONS:END
});
lc_dt.on('draw.dt',function(){
var PageInfo= $('#lc_dt').DataTable().page.info();
lc_dt.column(0,{page:'current'}).nodes().each(function(cell,i){
cell.innerHTML= i+1+PageInfo.start;
});
$('#vtotRecCnt').val(PageInfo.recordsTotal);
$('#vFltrRecCnt').val(lc_dt.rows({search:'applied'}).count());
$('#vtotPgCnt').val(PageInfo.pages);
$('#vThsPg').val(PageInfo.page+1);
$('#vVisRec').val(PageInfo.length);
uwuhb();
});//DATATABLE:END
}`
function transaction(){
var lc_dt = $('#lc_dt').DataTable({
dom: '<Bf<tr>pl>',
"lengthMenu": [[10, 50, 100, 200, 300], [10, 50, 100, 200, 300]],
pageLength:10,
"processing":true,
"serverSide":true,
responsive:true,
//stateSave:true,
"deferRender":true,
language:{
//processing: '
',
oPaginate: {
sNext: '<i class="material-icons">arrow_forward</i>',
sPrevious: '<i class="material-icons">arrow_back</i>',
sFirst: '<i class="material-icons">first_page</i>',
sLast: '<i class="material-icons">last_page</i>'
}
},
"ajax":{
url :"../b_p/managers_transactions.php",
type: "GET",
/* "data":{
"filterValue":filterValue
}, */
data: function(d){
var value= $('#pmis').val();
if(value === undefined){
value= defFltrVal;
}
d.filterValue = value;
},
error: function(){
console.log("something went wrong");
}
},
"aoColumns":[
{ "data": "", orderable: false, searchable: false },
{ "data": "c" },
{ "data": "d" },
{ "data": "j" },
{ "data": "j" },
{ "data": "j" },
{ "data": "j" },
{ "data": "", orderable: false, searchable: false, "render": function(data, type, row, meta){
//return '<a href="customer/' + row['id'] + '/edit" onclick="openMenuModal()" >Edit</a>
//return '<a class="btn bg-teal" onclick="" data-toggle="modal" data-target="#menuModal" >Menu</a>';
return '
';
}},
],//aoColumns:END
"columnDefs":[
{ responsivePriority: 1, targets: 0 },
//{ responsivePriority: 2, targets: 1 },
//{ responsivePriority: 3, targets: 8 },
//{ responsivePriority: 4, targets: 9 },
//{ responsivePriority: 10001, targets: 5 },
//{ responsivePriority: 10002, targets: 7 }
//{ responsivePriority: 10003, targets: 4 }
//{
//"targets": 7, "render": function(data, type, row, meta){
//return '<a href="customer/' + row['id'] + '/edit" onclick="openMenuModal()" >Edit</a>
//return '<a class="btn bg-teal" onclick="" data-toggle="modal" data-target="#menuModal" >Menu</a>';
//}
//}
],
"order": [[ 1, 'asc' ]],
autoWidth:false,
/* "initComplete": function (settings, json){
$('#totalRecordsCount').val(json.recordsTotal);
}, */
buttons:[
{extend: 'print', text: 'Print', titleAttr: 'Print'},
{extend: 'copy', text: 'Copy', titleAttr: 'Copy'},
{extend: 'excel', text: 'Excel',titleAttr: 'Excel',className: 'excelButton'},
{extend: 'pdf', exportOptions: { columns: [1, 2] }, text: 'Pdf',
// titleAttr: 'PDF'
},
{extend: 'csv', text: 'Csv', titleAttr: 'Csv'},
{
text: 'Reload', action: function ( e, dt, node, config ){
lc_dt.ajax.reload(null,false);//lc_dt.ajax.reload();
}
},
{text: 'Expand All', action: function ( e, dt, node, config ){
lc_dt.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
}},
{text: 'Collapse All', action: function ( e, dt, node, config ){
lc_dt.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
}},
//{text: 'Show All',action: function ( e, dt, node, config ){lc_dt.page.len( -1 ).draw();}},
{
extend: 'colvis',
//text: '<i class="material-icons">view_column</i> Column',
text: '<span class="colvis"> Column</span>',
//columns: [0, 1, 2, 3],
columnText: function ( dt, idx, title ){
return (idx+1)+': '+title;
}
}
]//BUTTONS:END
});
lc_dt.on('draw.dt',function(){
var PageInfo= $('#lc_dt').DataTable().page.info();
lc_dt.column(0,{page:'current'}).nodes().each(function(cell,i){
cell.innerHTML= i+1+PageInfo.start;
});
$('#vtotRecCnt').val(PageInfo.recordsTotal);
$('#vFltrRecCnt').val(lc_dt.rows({search:'applied'}).count());
$('#vtotPgCnt').val(PageInfo.pages);
$('#vThsPg').val(PageInfo.page+1);
$('#vVisRec').val(PageInfo.length);
uwuhb();
});//DATATABLE:END
}
Hi,
Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Allan
http://live.datatables.net/buriwazi/7/edit
Please check the above link, you will get some idea what i'm trying to do. As i'm using database and ajax to fetch data in background i can not do it at the provided demo.
This is what my form and table looks like
datatable is initialized and show data when i click on submit button, and when i again click on submit it shows the alert.
i added
destroy:true,after that alert is not showingI want to pass form data to datatable and submit like a regular form, i want to know if i pass data to ajax and click on submit then when i go to next page it will not reset itself ?