How can add checkbox to the datatables

Question

I want to put check box to the data table ,and the output is coming from Json array ,and displaying these array elements in html table using javascript.

and I want to add a checkbox to each and every row so that it can be easy to edit,delete.

HTML Code is:

<table id="example1" class="table table-bordered table-striped num-right-alignct">
    <thead>
        <tr>
            <th  style="text-align: center;">Ad Headline</th>
            <th  style="text-align: center;">Ad ID</th>
            <th  style="text-align: center;">Ad Description 1</th>
            <th  style="text-align: center;">Ad Description 2</th>
            <th  style="text-align: center;">URL Appeared</th>
            <th  style="text-align: center;">Clicks</th>
            <th  style="text-align: center;">CPC</th>
            <th  style="text-align: center;">Conversions</th>
            <th  style="text-align: center;">CTR %</th>
            <th  style="text-align: center;">Impressions</th>
            <th  style="text-align: center;">Avg Pos</th>
            <th  style="text-align: center;">Cost</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS code:

$("#groupid").change(function(){
var oTable = $('#example1').dataTable();
var grpvalue=$('#groupid').val();
                $.ajax({
                type:"post", 
                dataType : 'json',
                url:"pages/ads.php", 
                data:"adgroup="+grpvalue, 
                success: function(s) {
                oTable.fnClearTable();
                for(var i = 0; i < s.length; i++) {
                    oTable.fnAddData([          
                        s[i]['hea']["0"],
                        s[i]['id']["0"],
                        s[i]['desc']["0"],
                        s[i]['desc2']["0"],
                        s[i]['url']["0"],
                        s[i]['cli']["0"],
                        s[i]['cpc']["0"],
                        s[i]['con']["0"],
                        s[i]['ctr']["0"],
                        s[i]['imp']["0"],

                        s[i]['ap']["0"],
                        s[i]['cost']["0"]
                        ]);
                        }
                        }
            });
});

And html table data is dynamic and I want to add a checkbox to each and every row.please let me know the procedure to do this.

can you please elaborate your answer,so that I can understand — Babby
– Babby, Commented Jan 13, 2015 at 6:39
Some years later: Now, there is a great plugin, works with serverside to, incl. selectall an more: gyrocode.com/projects/jquery-datatables-checkboxes — Sarah Trees
– Sarah Trees, Commented Jun 19, 2018 at 18:49

sharif2008 · Accepted Answer · 2015-01-13 07:30:06Z

1

I am trying to show you how I solved my problem. This may help you. My Datatable version is : DataTables 1.10.0

Html Code:

    <table  id="table_id">
    <thead ">
        <tr>
        <th>STM Name</th>
        <th>Physical Termination Prefix</th>
        <th>Media gateway Name</th>
        <th>Primary Megaco IP</th>
        <th>Primary Megaco Port</th>
        <th>Administrative Status</th>
        <th>Operational Status</th>
        <th>Select <input value="-1"   type="checkbox"></th>
        </tr>
    </thead>
    <tbody >
        <!--Table will generate here.-->

    </tbody>
    </table>

Pass response like this from the server:

{"aaData":[{"id":1,"name":"stm1","physicalTerminationPrefix":"pre","mediagatewayName":"mgw1","primaryMegacoIp":"192.19.0.1","primaryMegacoPort":4444,"actionStatus":1,"checkbox":"\u003cinput  type\u003d\u0027checkbox\u0027 value\u003d\u00271\u0027 /\u003e","idLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003e1\u003c/a\u003e","nameLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003estm1\u003c/a\u003e","administrativeStatus":"FRESH_ENTRY","operationalStatus":-1,"operationalStatusStr":"ACTIVE"}]}

configure your js like this:

    var oTable = $('#table_id').dataTable({
                "aoColumnDefs": [
                    {'bSortable': false, 'aTargets': [7]}
                ],
                "info": false,
                "bStateSave": true,
                "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
                pagingType: "simple",
                "oLanguage": {
                    "oPaginate": {
                        "sNext": '&gt',
                        "sLast": '&raquo',
                        "sFirst": '&laquo',
                        "sPrevious": '&lt'
                    },
                    "sEmptyTable": "No STM is Found !!!"
                },
                "aoColumns": [
                    //{"mData": "idLink"},
                    {"mData": "nameLink"},
                    {"mData": "physicalTerminationPrefix"},
                    {"mData": "mediagatewayName"},
                    {"mData": "primaryMegacoIp"},
                    {"mData": "primaryMegacoPort"},
                    {"mData": "administrativeStatus"},
                    {"mData": "operationalStatusStr"},
                    {"mData": "checkbox"}],
                "bProcessing ": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": 'data',
                        "success": function (data) {

                            oTable.fnClearTable();
                            if (data.aaData.length != 0)
                            {
                                oTable.fnAddData(data.aaData);
                                oTable.fnDraw();
                            }

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("Error Code: " + jqXHR.status + ", Type:" + textStatus + ", Message: " + errorThrown);
                        }
                    });
                }
            });

and Prepare your checkbox column like this in the server:

 var checkbox ="<input  type='checkbox' value='1' />";

Here is my sample Output: enter image description here

answered Jan 13, 2015 at 7:30

sharif2008

2,8083 gold badges22 silver badges37 bronze badges

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

8 Comments

Babby Over a year ago

"fnServerData": function (sSource, aoData, fnCallback) what are these parameters ?

sharif2008 Over a year ago

sSource is the ajax URL, fnCallback is the ajax callback Function and aoData is array of Object(Data) to pass this ajax call

sharif2008 Over a year ago

you need call this function oTable.fnReloadAjax() to trigger the fnServerData. you can google to know fnReloadAjax

Babby Over a year ago

What is meant by lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],

sharif2008 Over a year ago

skip these. It was necessary for my project to change dropdown pagination. such as 5 pages per pages. just focus on these "{"mData": "checkbox"}]," under ** "aoColumns":** and send checkbox html from the server as json response.

|

Sougata Bose · Accepted Answer · 2015-01-13 06:40:26Z

0

Define them for column definitions -

var oDataTable = j('#yourtableid').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "requestedage.php",
"aoColumns": [ 
              {"mData" : "ID"},
              {
                "mData": "Date",
                "mRender": function ( data, type, full ) {
                  return '<input type="checkbox" name="modifiedname" id="modifiedname"> Label';
                },
              }
            ],
 ..... //rest of the setting

data type full are the parameters passed to the function. See the docs to know about more about the passed arguments.

answered Jan 13, 2015 at 6:40

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

6 Comments

charlietfl Over a year ago

depends on version of plugin, after 1.10 API changed

Babby Over a year ago

I don't where to place the code actually ,I am a newbie to js and ajax.

Sougata Bose Over a year ago

@charlietfl when i worked on this it was latest. dint know about the current version. :)

Babby Over a year ago

Can you please provide the documentation link ,so that I can view

Sougata Bose Over a year ago

its in the previous comments.

|

Collectives™ on Stack Overflow

How can add checkbox to the datatables

2 Answers 2

8 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related