Use Bootstrap 4 modal with server-side call

xdavidt

Recently DataTables is the best solution's to my projects, and I start use them with all functions needed.
The documentation is very well, and easy to go.
One problem get me stuck for days, to start using Bootstarp Modal in my table.

Here is my code that include server-side call (POST method) and search places:

         $(document).ready(()=>{
             $('#dataTableLogs tfoot th').each(function () {
                 var title = $(this).text();
                 $(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
             } );

        var offenseTable = $('#dataTableLogs').DataTable( {
            order:[[1,""]],
            processing: true,
            serverSide: true,
            ajax: {
                url: '/api/logs/get',
                type: 'POST'
            },
            columns: [
                {data: '_id'},
                {data: 'field1'},
                {data: 'field2'},
                {data: 'field3.0'},
                {data: 'field4'},
                {data: 'field5', "visible": false}
            ]
        } )

        offenseTable.columns().every(function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change clear', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );

I want to use all the data (include field5) in my modal, when user "click" the row, or click the + on the left side.
Didn't understand very well how to do it and how to use it. Maybe it from the lack of understand jQuery/JS.
Very need your help here.

allan

Do you mean like this? Or are you looking to create a custom modal? I don't see any modal code in the block above.

Allan

xdavidt

I'm not sure how to use the modal in my code by the site documentation.
That is the main reason for asking this question.
Since the example in the document don't show how to load the data (from ajax or from array)

xdavidt

Is it need to be like this ?

$(document).ready(()=>{
     $('#dataTableLogs tfoot th').each(function () {
         var title = $(this).text();
         $(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
     } );

var offenseTable = $('#dataTableLogs').DataTable( {
    order:[[1,""]],
    processing: true,
    serverSide: true,
    ajax: {
        url: '/api/logs/get',
        type: 'POST'
    },
    columns: [
        {data: '_id'},
        {data: 'field1'},
        {data: 'field2'},
        {data: 'field3.0'},
        {data: 'field4'},
        {data: 'field5', "visible": false}
    ],
responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }
        }
} )

offenseTable.columns().every(function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change clear', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

allan

I'm not sure how to use the modal in my code by the site documentation.

If you want to use a Bootstrap modal you'd need to refer to the Bootstrap documentation. You won't find any documentation for that on this site since we don't document Bootstrap 4 - they do that .

Allan

xdavidt

I want to use the modal bootstrap just the same way you used in the link, but Im not sure how to do so when I'm using data from ajax request.
Nothing more then that.
In example you linked to, you showed modal from static data in the HTML page.
That is the only thing.

Right now with request above I'm trying to use:

$('#dataTableLogs tbody').on('click','tr',function(e){
    e.preventDefault()
    var data = offenseTable.row( this ).data()
    alert(data[0])
    } )

But, alert is popup with "undefined".
So I try:

offenseTable.$('tr').click(function(){
    var data = offenseTable.fnGetData(this)
    alert(data[0])
})

Then exception from jquery.
I don't sure what I'm doing wrong.
How I get the data the I already have in table into modal ?
It's must to be bootstrap4 modal by the way...

kthorngren

alert(data[0])

You are using objects since you have defined columns.data. You will need to access you data using object notion instead of array notation. For example:

alert(data._id)

Kevin

xdavidt

Thank you Kevin.
In that way I can build the Modal manually and get the data into the modal.
In documents of modal (that Allan linked to), it's look like built-in function without need to create the modal by yourself, that was my main question.

In any case Thank you.