Put HTML Form In Bootstrap 4 Modal Inside DataTable
Put HTML Form In Bootstrap 4 Modal Inside DataTable
zgoforth
Posts: 493Questions: 98Answers: 2
Hello, so I have a DataTable and an HTML form that is used to update the DataTable by sending info collected to its respective SharePoint list. I found on this site about Bootstrap Modals, and was curious to if I can place the modal in the header of my DataTable. Where I have my export dom dropdown button.
$(document).ready(function() {
var collapsedGroups = {};
var top = '';
var parent = '';
var table = $('#myTable').DataTable( {
"columns": [
{ "data": "Program", visible: false },
{ "data": "Deliverable", visible: false },
{ "data": " ",},
{ "data": "To" },
{ "data": "Date" },
{ "data": "Approved" },
{ "data": "Notes" }
],
dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [{
extend: 'collection',
className: "btn-dark",
text: 'Export',
buttons:
[{
extend: "excel", className: "btn-dark"
},
{
extend: "pdf", className: "btn-dark"
},
{
extend: "print", className: "btn-dark"
},
],
}],
order: [[0, 'asc'], [1, 'asc'] ],
rowGroup: {
dataSrc: [
'Program',
'Deliverable'
],
startRender: function (rows,group,level){
var all;
if (level === 0) {
top = group;
all = group;
} else if (level === 1) {
parent = top + group;
all = parent;
// if parent collapsed, nothing to do
if (!collapsedGroups[top]) {
return;
}
} else {
// if parent collapsed, nothing to do
if (!collapsedGroups[parent]) {
return;
}
all = top + parent + group;
}
var collapsed = !collapsedGroups[all];
console.log('collapsed:', collapsed);
rows.nodes().each(function(r) {
r.style.display = collapsed ? 'none' : '';
});
//Add category name to the <tr>.
return $('<tr/>')
.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
}
}
} );
loadData();
$('#myTable tbody').on('click', 'tr.dtrg-start', function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
} );
Here is my modal with form in it.
https://jsfiddle.net/roh6cvp7/
This discussion has been closed.
Replies
You can use a Custom Button for this. Here is an example. In the button you can use .modal('show') to show the modal.
Kevin
@kthorngren I added it to my datatable buttons section, and nothing happened. I tried making a DataTable with static version of my data but it isnt working -.- https://jsfiddle.net/y67124Ls/
Did you look at the browser's console for errors?
Kevin
@kthorngren fixed/updated it. this fiddle for some reason wont group my data properly but thats not the issue I am worried about https://jsfiddle.net/y67124Ls/
I cant seem to figure why the button I tried to implement doesn't show up. Can't find anything in the console.
You provided the same test case link.
Did you include the buttons JS and CSS code? Your first example only has
jquery.dataTables.min.cssand is missing datatables.js and the buttons code.Kevin
My apologies. Yes I do have it https://jsfiddle.net/y67124Ls/1/
Your alert is missing a closing bracket.
Testing your test cases before posting them would be a sensible idea.
@tangerine I have.
Not sure if you still have a question. Its working, you placed it inside the buttons collection so you have to click the Export button.
Kevin
@kthorngren my apologies I didn't recall adding it to "extend" for that to happen but it did. My question is how do I get my HTML form to show up in that button
As I mentioned earlier....
Kevin
@kthorngren I understand that. but the modal('show') requires a javscript function. How can I insert a HTML form into that? I have tried looking it up and all I can see is a table not a form, which is nothing like I want.
for example.. https://jsfiddle.net/y67124Ls/2/
You need your modal HTML code from your first example. Then instead of the button in your first example you are using the custom button. To have the custom button show the modal you will replace the alert message with
$('#myModal').modal('show');wheremyModalis the HTML id of the modal.Kevin
@kthorngren so would I need to wrap the form element in a div with the class name
<
div class="myModal">
I replaced the alert message with
$('#myModal').modal('show');and nothing occurs once I click the Update Table buttonAnd once I put it in the div, it disappears..
Do you get any errors in the console?
Did you update the test case? if so what is the link?
Kevin
https://jsfiddle.net/y67124Ls/3/
It says : $(...).modal is not a function
Did you load bootstrap.js? You need the bootstrap.js to use the Bootstrap API's.
Kevin
Yes, If you look at the top of the HTML block, you will see all of the java and css files I loaded.
I don't see
bootstrap.js. Please loadbootstrap.jsto see if it fixes your issue.Kevin
Very nice.
It posts it in the upperleft of the screen, how can I fix the CSS for it to be positioned in the center.
See if the Bootstrap Modal docs help you position the modal.
Kevin
@kthorngren just figured it out before you commented that. Thank you. Sorry for the cross posts. One last thing. When it opens, I cant close it without hitting submit on the form. Not even the escape button works.
Ive come across some videos where they edit it through html div elements. This is the last way I would want to edit it. Is it easier with more jQuery? Why doesn't this work
as opposed to
$('#myModal').modal('show');I don't understand what you mean. However this sounds more like a Bootstrap Modal question which you will get better support on Stack Overflow.
I don't know. Again this is a Bootstrap question.
Kevin
@kthorngren Just made a post on there, thnak you. But now my form doesn't work wit the dropdowns or anything in the modal its so annoying 0.o