Accessing Data table details in separate file

adrianmills

Hope you can help with this i am new data table's.

We have a data-table that is set up in partial view

             <table id="Qualities" class="table table-striped table-bordered table-td-valign-middle" data-detailLink='@Url.Action("Detail", new { id = "__id__" })' onclick="DetailView(this);">

            var table = $('#Qualities').DataTable({
                        responsive: true,
                        retrieve: true,
                        "scrollY": "400px",
                        "scrollCollapse": true,
                        "paging": true,

                        "ajax": {
                            "url": 
                            "dataSrc": "data"
                        },

                        rowId:"ID"
                    });

in a separate file i have a function that loads a detail based on the selected row's id and the detail link. I can get the datatable but struggling to find a way of getting the id.

i have tried converting the passed in variable to

function DetailView(e) {
    debugger;


    var table = e.dataTable();

    var detailLink = e.dataset.detaillink;

but i am getting the error

Uncaught TypeError: e.dataTable is not a function

If someone could point me in the right direction as i am sure it can be done but if not saves me chasing my tail.

colin

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

adrianmills

Cheers I have created a test here that simulates what we are trying to do.

http://live.datatables.net/neqikozi/1/edit?html,js,console,output

If i put the code into the html as

    $('#Qualities').on('click', 'tr', function () {

            var id =  table.row(this).id();

            var actionurl ='@Url.Action("Detail", new { id = "__id__" })'.replace('__id__', id);

it works fine however we are going to have 50-100 tables that will be doing the same type of opening just with a different url. So have a requirement to have one generic function if it is possible.

adrianmills

I have found the solution.
I have managed to to implement the select functionality so when the table is created we have

     rowId: "ID",
     select:'single'

and then in the function we convert the rows to array and then find the one where the class name is selected.

    let rows = Array.from(tableDetails.rows);

    var selectedRow = rows.find(r => r.className.includes("selected"));

    var id = selectedRow.id;


    var detailLink = tableDetails.dataset.detaillink;

    var actionurl = detailLink.replace('__id__', id);