how to add custom class name to rows generated by Jquery DataTable

Question

Here is the code which reads values from database and diplay them in the Jquery DataTable.

This code generate automatic rows and i want to add some custom classes can any one tell me how to do that

i inspected the Code It Adds

    $(document).ready(function () {

        //jQuery DataTables initialization
        $('#myDatatable').DataTable({
            "processing": true, // for show processing bar
            "serverSide": true, // for process on server side
            "orderMulti": true, // for disable multi column order
            "dom": '<"top"i>rt<"bottom"lp><"clear">', // for hide default global search box // little confusion? don't worry I explained in the tutorial website
            "ajax": {
                "url": '/Users/GetAllUsers',
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                    {
                        "data": "User_FirstName", "autoWidth": true
                    },
                    {
                        "data": "User_LastName", "autoWidth": true
                    },
                    { "data": "User_IsActive", "autoWidth": true },
                    { "data": "User_Email", "autoWidth": true },
                    { "data": "User_UserName", "autoWidth": true },
                    //{ "data": "User_UserType", "autoWidth": true },
                     {
                         "data": "User_Id",
                         "render": function (data, type, full, meta) {
                            var v_count = full['User_IsActive'];
                             if (!v_count) {
                                 return '<a  class="btn btn-verify " href="#">Enable<i class="fa fa-check wow fadeInRightBig"></i></a>';

                             } else if (v_count) {
                                 return '<a  class="btn btn-verify " href="#">Disable<i class="fa fa-ban  wow fadeInRightBig" aria-hidden="true"></i></i></a>';

                             }
                         }
                     },
                     {
                         "data": "User_Id",
                         "render": function (data, type, full, meta) {
                             var v_count = full['User_UserType'];
                             if (v_count!=null) {
                                 return '<a class="wow fadeInRightBig"  href="#">' + v_count + '<i class="fa fa-check "></i></a>';

                             } else if (v_count) {
                                 return '<a  class="btn btn-verify " href="#">Disable<i class="fa fa-ban  wow fadeInRightBig" aria-hidden="true"></i></i></a>';

                             }
                         }
                     }



            ]

        });

Farhad Bagherlo · Accepted Answer · 2017-08-21 17:42:24Z

DEMO

var dataSet = [['Dadar', 'lmsSenitaD', 'Atul salaskar', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Come back and Join', 'Mobile', 'Times','1'],
    ['Aundh', 'Rashmi', 'Preeti Gupta', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Will Discuss with Family', 'Online Campaign', 'Iksula','2'],
    ['Do@Home_Thane', 'Rashmi', 'Mitali Gupta', '9876543210', '', 'Joined - Old Date', '10/01/2014', '20/08/2014', 'Come back and Join', 'Online Campaign', 'Iksula','4']];

    $(document).ready(function () {
        $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

        $('#example').dataTable({
            "data": dataSet,                
            "columns": [
                            { "title": "Center" },
                            { "title": "Call Executive" },
                            { "title": "Name" },
                            { "title": "Mobile" },
                            { "title": "Phone" },
                            { "title": "Status" },
                            { "title": "Appt Date" },
                            { "title": "Joined Date" },
                            { "title": "Remark" },
                            { "title": "Source" },
                            { "title": "Publisher" },
                            { "title": "css" },
                          ]
                          ,
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                var css = aData[aData.length - 1];
                if (css == "1") {
                    $(nRow).addClass('gradeN');
                }
                else if(css == "2") {
                    $(nRow).addClass('gradeC');
                }
                else{
                    $(nRow).addClass('gradeM');
                }

            }

Collectives™ on Stack Overflow

how to add custom class name to rows generated by Jquery DataTable

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