locked
Edit & Delete Images RRS feed

  • Question

  • User-797751191 posted

    Hi

      I have below code and i want to add Edit & delete icons

    $(document).ready(function () {
        $("#tblUser").DataTable({
            "lengthMenu": [3, 5, 10],
            "processing": true, // for show progress bar
            //"serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                //"url": "@Url.Content("~/Users/GetAllUsers")",
                "url": "/Home/List",
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                    { "data": "UserName", "name": "UserName", "autoWidth": true },
                    { "data": "Password", "name": "Password", "autoWidth": true },
                    { "data": "FirstName", "name": "FirstName", "autoWidth": true },
                    { "data": "LastName", "name": "LastName", "autoWidth": true }
            ]
        });
    
    });

    Thanks

    Monday, November 4, 2019 9:57 AM

All replies

  • User-17257777 posted

    Hi jsshivalik,

    Use column.defaultContent Option to create a static content for a column. Test with the following codes:

    <div class="container">
    <table id="tblUser" class="table table-striped table-bordered dt-responsive nowrap" width:"100%" cellspacing="0">
    <thead>
    <tr>
    <th>UserName</th>
    <th>Password</th>
    <th>FirstName</th>
    <th>LastName</th>
    <th>Action</th>
    </tr>
    </thead>
    <tbody class="tbody"></tbody>
    </table>
    </div>

    @section scripts{ <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function () { $("#tblUser").DataTable({ "lengthMenu": [3, 5, 10], "processing": true, "filter": false, "orderMulti": false, "ajax": { "url": "/Home/List", "type": "POST", "datatype": "json" }, "columns": [ { "data": "UserName", "name": "UserName", "autoWidth": true }, { "data": "Password", "name": "Password", "autoWidth": true }, { "data": "FirstName", "name": "FirstName", "autoWidth": true }, { "data": "LastName", "name": "LastName", "autoWidth": true }, { data: null, className: "center", defaultContent: '<a href="#" class="btn btn-success btn-sm"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i></a> ' } ] }); }); </script> }

    Result:

    Best Regards,

    Jiadong Meng

    Tuesday, November 5, 2019 2:22 AM