jquery datatables add checkbox with ajax server side response

Question

I am using C# ASP .NET MVC and ajax calls. I am able to get the display of the table along with all features.

But, I don't understand how do I add a checkbox and button. I have tried dom-checkbox as well but can't get it to work.

Any help is appreciated.

My code looks like this:

$(document).ready(function () {

$('#personTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Home/GetCustomData",
            "aoColumns": [
                         { "sSortDataType": "dom-checkbox", "sTitle": "Select", 
                                     sName": "" },
                         { "sName": "ID", "sTitle": "ID" },
             { "sName": "FirstName", "sTitle": "First Name" },
             { "sName": "Email", "sTitle": "Email"}]
        });
    });

My Html is : [table border="1" id="personTable" class="display"] [/table]

Community · Accepted Answer · 2017-05-23 11:47:52Z

3

If you do not fancy returning html in json response as described in Lukasz Dziedzia's answer, you can override fnRowCallback function, on the client side, to do the checkbox inserting in the row before it is displayed.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Oct 5, 2011 at 9:26

Davorin Ruševljan

4,40223 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dzida · Accepted Answer · 2010-06-24 21:24:53Z

0

Simply you need to return checkbox html code in your response. In your json response add something like this:

...
"aaData":[
[
...
    "<input type=\"checkbox\" />",
...
]

(You can also use html as type for this column, but probably sorting and other features like that will be disabled for columns with checkboxes, so this has no impact at all.)

answered Jun 24, 2010 at 21:24

dzida

9,0312 gold badges40 silver badges57 bronze badges

Comments

Nava Ruban · Accepted Answer · 2020-03-21 05:50:24Z

0

ColumnDefs:[
            { 'targets': [0],
              'render': function (data, type, full, meta)
                        {
                          return '<input type="checkbox" name="id[]" value="' + 
                          $('<div/>').text(data).html() + '">';
                        }
             }
           ]

answered Mar 21, 2020 at 5:50

Nava Ruban

951 silver badge11 bronze badges

Collectives™ on Stack Overflow

jquery datatables add checkbox with ajax server side response

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related