Trying to open a modal from a datatable rowclick
Trying to open a modal from a datatable rowclick
saritha248
Posts: 3Questions: 1Answers: 0
Iam working with datatables example and getting an error like this when trying to open a modal from the datatable rowclick: Datatables warning(table id = 'example'): cannot reinitialise data table.
i'm using jquery to open a modal.
Here is my code, I have 2 hyperlink columns in a row when i click on edit i want to open a form in modal, The modal opens but along with datatbale warning alert
$(document).ready(function () {
$('#pendingTab tfoot th').each(function () {
$(this).html('<input type="text" />');
});
$('#demo2').html('<table width="100%" class="table table-hover table-condensed stripe compact order-column" id="pendingTab" cellspacing="0"></table>');
var oTable = $('#pendingTab').DataTable({
"processing": true,
"paging": true,
"deferRender": true,
"ajax": {
"type": "GET",
"url": '/Owner/p_Move',
"contentType": 'application/json; charset=utf-8',
"dataSrc": ""
},
"columns": [
{
"data": "prop_id",
"className": 'propid'
},
{
"data": "name",
"className": 'b_name'
},
{
"data": "bed_id",
"className": 'bed'
},
{ "data": "unit_id" },
{
"data": "email",
"className": 'b_email'
},
{
"data": "move_in_date"
},
{
"data": "bed_id",
"sortable": false,
"render": function (data, type, full, meta) {
return '<a class="cancel"> Cancel </a>';
}
},
{
"data": "bed_id",
"sortable": false,
"render": function (data, type, full, meta) {
return '<a class="edit"> Edit </a>';
}
}
],
"order": [0, "asc"]
});
oTable.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
$('#pendingTab tbody').on('click', 'a.edit', function () {
var tr = $(this).closest('tr');
var Bid = tr.find(".bed").html()
var name = tr.find(".b_name").html()
var email=tr.find(".b_email").html()
$.ajax({
url: '/Owner/Edit_mIn/',
data: {
'Bid': Bid,
'name': name,
'email':email,
format: 'json'
},
dataType: 'html',
type: 'GET',
success: function (data) {
$('#Pending').modal("hide");
$('#editModal').html(data);
$('#edit_mIN').modal("show");
},
});
});
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The first problem I see is
you need to add <thead></thead><tbody></tbody>
next: since the table has not <th> tags, you need to add title to your columns
Then next issue you are going to run into is that you are creating the table while it is still hidden instead of after the modal is popped up. Many things in html and jquery end up looking funny when they are not visible when created. But try it before you change it. Sometimes it is an issue, sometimes not.
The first time the modal with the table is popped up, you create the table.
After that, you just have to clear, the reload the data.
or
recreate the table each time the modal opens
but you have to destroy the table when its closed or reopened to stop that error.
I don't see the html this runs on, I have to make some guesses
I have <thead><tbody> and <th> tags in html, so i did'nt give it in the script file.
Can ypu please let me know how to destroy the table when it is closed??
var table = $("#example").DataTable();
table.destroy(true);
True causes the DataTable to be remove along with the table html.
False will remove the DataTable but leave behind the html
https://datatables.net/reference/api/destroy()
Thank you so much @bindrid , That solved the issue