Using Ajax Datatables with Modals?

sid0195

So i'm using a action in MVC to get all my data required for a table and then using GET in ajax to put it in the table, how would I implement modals to this?

My Code:

$(document).ready(function () {
$.ajax({
url: '/Controller/Action/',
type: 'GET',
dataType: 'json',
success: function (data) {
assignToEventsColumns(data);
}
});

    function assignToEventsColumns(data) {
        var table = $('#table').dataTable({
            "bAutoWidth" : true,
            "aaData" : data,
            "columns" : [ {
                "data" : "Column1"
            }, {
                "data" : "Column2"
            }, {
                "data" : "Column3"
            }, {
                "data" : "Column4"
            }, {
                "data" : "Column5"
            }, {
                "data" : "Column6"
            }, {
                "data": "Date",
            }],
        })
    }
});

allan

What modal library are you using, or have you written your own?

Allan

bindrid

If it is relevant, I use bootstrap modal and use the on show event handler to make the ajax call and create the table. (it is essentially a name picker for my users that allows them to see the details of a user in a second modal or just select a name and return it on modal close.).

sid0195

@allan well I was originally trying to get it to work with bootstrap and had no luck, so I got the responsive extension to display the modal but with that I encounter a new problem, for some reason I have to use table-layout: fixed; to show all the data and for text-overflow: ellipsis to work as intended, and then it just doesnt load the default responsive button. Any ideas?

@bindrid Can you show like a sample code?

sid0195

@allan removed all the css I was using and added:
columnDefs: [{
targets: 3,
render: function (data, type, row) {
return data.substr(0, 25) + "...";
}
}],

to the code and responsive still stops working

bindrid

I can't put my code out there, to integrated with other work but I should be able to duplicate it if you give me a day or two (LOL, think my boss might get upset of worked on it from work)

sid0195

@bindrid Yeah no problem :')

bindrid

@sid0195
It is not done and the code is still a mess but it works, I will try to finish it tomorrow.

http://live.datatables.net/palaliso/2/edit

sid0195

@bindrid Dont worry about finishing it, thanks!

bindrid

Its more or less finished
http://live.datatables.net/palaliso/5/edit

Main page shows a single customer.
The first modal pops up when the search button is clicked. Than contains a datatable used to search for users.

Click on the details button after selecting a user, and a second modal pops up showing the details of the user.

Click on Select button after selecting a user and the information is copied to the parent form.

The Details modal and the parent form use knockout bindings and a viewmodel to update the form elements.