please help how to put delete button in each row

please help how to put delete button in each row

jemzjemz Posts: 131Questions: 40Answers: 1

Hi, I successfully load the data to my datable,but the problem is that how can I put delete button in each row.

Thank you in advance.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css">

    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src="js/dataTablesBootstrap.js"></script>



    <script type="text/javascript" charset="utf-8">


        $(document).ready(function() {

                    $('#example').dataTable( {
                        "processing": true,
                        "serverSide": true,
                        "start": 0,
                        "ajax": {
                            url:"querydata2.php"
                        },
                        "columns": [
                            { "data": "id"},
                            { "data": "empno"},
                            { "data": "firstname"},
                            { "data": "lastname"}

                        ]

                    } );

        } );




    </script>


</head>
<body>
<div class="container">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>EMPNO</th>
            <th>FIRSTNAME</th>
            <th>LASTNAME</th>

        </tr>
        </thead>


    </table>
</div>


</body>
</html>

This question has an accepted answers - jump to answer

Answers

  • john_ljohn_l Posts: 45Questions: 0Answers: 12

    The simplest way I can think of would be to just add an additional column into the data returned from the server. You could populate it with something like "<span class='deleteButton' id='{value from ID column}'>Delete</span>", and then you can use something like jQuery UI's .button() to turn them into buttons.

    You'll also need to set up an event handler on the buttons that'll make the appropriate web service call to the server to delete the clicked row.

  • jemzjemz Posts: 131Questions: 40Answers: 1

    I am confuse,how to do that, you mean to build the button in my server side ?

  • john_ljohn_l Posts: 45Questions: 0Answers: 12
    Answer ✓

    Yes - you can add the html for the button into a new column that gets returned from the server, and then once the datatable is initialized in the browser, transform the html into the buttons via a function that could be called from initComplete callback.

  • jemzjemz Posts: 131Questions: 40Answers: 1

    I got it !.thanks

This discussion has been closed.