How to use json in all pages.

jongsky24

So i use datatables. And i want to show a detail data(with modal bootstrap) when click the row of the table with json. The data only show in first page, and doesnt show if i go to other page.
im use this javascript :

```
$(document).ready(function() {
// class of my row
$('.detailDataisr').on('click', function() {

// the id from my db
const id = $(this).data('id');

            $.ajax({
                url: myUrl,
                data: {
                    id: id
                },
                method: 'post',
                dataType: 'json',
                success: function(data) {
                    // console.log(data);
                    $('#nama').html(data.name);
                    $('#locate').html(data.locate);

                }
            });
    });
});

I heard that ```row().data() can be a solution. but in my case, there is a column that i used to button. so i dont want trigger an entire row for this.
Im really new in JS and datatable. Any solution for this?
Thanks!

colin

Hi @jongsky24 ,

You want to use jQuery delegated events, see the explanation here in the FAQ.

Cheers,

Colin

jongsky24

@colin
i tried this

$(document).ready(function() {
        var table = $('#dataTable').DataTable();

        $('#dataTable tbody').on('click', 'tr', function() {
            var data = table.row(this).data();
            $('.detailDataisr').on('click', function() {
                const id = $(this).data('id');

                $.ajax({
                    url: "<?= base_url('administrasi/detaildata'); ?>",
                    data: {
                        id: id
                    },
                   method: 'post',
                dataType: 'json',
                success: function(data) {
                    // console.log(data);
                    $('#name').html(data.name);
                    $('#locate').html(data.locate);

                    }
                });
            });
        });
    });

Its work but somehow its make me click twice to show the data. first try it will show my table but only column and an empty data on my modal, and second time it will show all my data according to where i click.

did i miss something? or i do wrong? sorry im really new in js.

colin

Hi @jongsky24 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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.

Cheers,

Colin

jongsky24

Hi @colin

Here the example of my code

im use modal for show the detaildata on 'click'-ing in table field then send json to my controllers and then send the value to my modal
Hope you can help me out

colin

You have to click twice as you've a click even handler being created with another click event handler. Also the table wasn't being initialised in that example - I've updated it here: http://live.datatables.net/beqimoki/2/edit

But the ajax call all looks good, so that should be fine,

Colin