Using the jquery definition how can I add the custom links buttons in datatables plugin based grid

Question

Used the data table plugin and try to add the two links Edit and Delete When I click on links it should redirect to some other page.

Please help me on this.. Thanks in advance...

Please find my code snippet:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/plugins/datatables/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/plugins/datatables/dataTables.bootstrap.js")" type="text/javascript"></script>
<div class="box-body table-responsive">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>EmployeeID</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div><!-- /.box-body -->
<script>
var serviceRootUrl = 'http://localhost:49425/Services/MyWcfService.svc/';

$(document).ready(function () {

    var oTable = $('#example').dataTable({

        "bJQueryUI": true,
        "bProcessing": true,

        "bServerSide": true,
        "sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",                
         "aoColumns": [
                    { data: "EmployeeID" },
                    { data: "Description" },
                    {
                        data: null,
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
                    }
            ]                


    });

});

check this datatables.net/forums/discussion/3193/…

Bhushan Kawadkar
– Bhushan Kawadkar

2015-07-24 11:59:25 +00:00
Commented Jul 24, 2015 at 11:59 — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jul 24, 2015 at 11:59

Naveenkumar · Accepted Answer · 2015-07-24 12:01:11Z

Use the mdata and mrender for the additional field or column to the datatables grid. Use this snap code inside the script and it should work.

$(document).ready(function () {
var oTable = $('#example').dataTable({
        "bJQueryUI": true,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",                
         "aoColumns": [
                    { "mData": "EmployeeID" },
                    { "mData": "Description" },
                    {
                "mData": "EmployeeID",
                "mRender": function (data, type, full) {
                    return '<a href="' + data + '">Edit</a>';
                }
            },
            {
                "mData": "EmployeeID",
                "mRender": function (data, type, full) {
                    return '<a href="' + data + '">Delete</a>';
                }
            }
            ]
    });
});

Collectives™ on Stack Overflow

Using the jquery definition how can I add the custom links buttons in datatables plugin based grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related