Buttons on table row not working on narrower screen

Buttons on table row not working on narrower screen

MurrayMurray Posts: 14Questions: 5Answers: 0

I have a number of buttons on each row of a table. When seen on a big enough screen the buttons are on the same row as the data including the id. If I resize the screen the buttons appear when the green/white + is clicked. they are now on a different row in the table and do not work as they no longer pick up the id of the row, or should I say what is now the previous row. The code used for this at present is:

        columns: [
            { title: "Id" },
            { title: "Reference" },
            { title: "First Name" },
            { title: "Last Name" },
            { title: "Phone" },
            { title: "Email" },
            { title: "Tests" },
            { title: "", "defaultContent": "<button  class=\"view\">View Tests</button><button  class=\"test\">Run Test</button><button  class=\"edit\">Edit</button><button class=\"delete\">Delete</button><button class=\"addtest\">Add Test</button>" },
        ],

and

    jQuery('#testclients tbody').on( 'click', 'button', function () {
        var action = this.className;
        var data = table.row( jQuery(this).parents('tr') ).data();
        var memberid = data[0];

        var access = '<?php echo $access; ?>';

        if (action=='view') {
           window.open('../clt/viewtests.php?id='+memberid,'_blank');
        }

        if (action=='test') {
             window.open('../clt/clt_instruct.php?id='+memberid,'_blank');
        }
 
        if(action == 'edit') {
         window.open('../clt/editclt.php?id='+memberid,'_blank');
        }

How do I reference the id of the row above where the buttons now reside?
Thank you for any insights.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 12,875Questions: 0Answers: 2,198

    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

  • MurrayMurray Posts: 14Questions: 5Answers: 0

    Thank you Colin
    I have put code into http://live.datatables.net/lewitemu/1/
    As you can see, when a button is clicked the relevant response occurs with the testid.
    I have not been able to replicate when shrinking the screen the buttons appear under the original row and accessible by clicking the green/white +.
    Under these circumstances on my system the test id is not retrieved as data[0] must be referring only to the upper row.
    How do I get the testid to be available when the buttons are under the row of data?

    Cheers
    Murray

  • colincolin Posts: 12,875Questions: 0Answers: 2,198
    Answer ✓

    The problem was that there's an additional row when child rows are displayed, and that needs to be factored in - see updated example here: http://live.datatables.net/lewitemu/2/edit

    It might also be worth looking at Editor, as that would make the CRUD operations easier!

    Colin

  • MurrayMurray Posts: 14Questions: 5Answers: 0

    Many thanks Colin for both the answer and the quick response.
    Murray

Sign In or Register to comment.