Question

179

How to show checkboxes in jquery.datatables?

rated 0 times [ 181] [ 2] / answers: 1 / hits: 42786 / 12 Years ago, wed, january 2, 2013, 12:00:00

I am using Datatables and I have the following code to generate the table. I want to display checkboxes for the read, write, execute and admin values.
If the value is equal to 1 , I want the checkbox to be checked. and if 0 checkboxes unchecked.

Javascript

<script type=text/javascript charset=utf-8>

            $(document).ready(function() {

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

                     sScrollY: 500px,                                

                    bPaginate: false,

                    bProcessing: true,

                    sAjaxSource: sources/sample.json

                } );





            } );

        </script>

HTML

<table cellpadding=0 cellspacing=0 border=0 class=display id=example>

                    <thead>

                        <tr>

                            <th width=20%>Browser</th>

                            <th width=25%>Read</th>

                            <th width=25%>Write</th>

                            <th width=15%>Execute</th>

                            <th width=15%>Admin</th>

                        </tr>

                    </thead>

                    <tbody>



                    </tbody>

                    </table>

JSON

{ aaData: [

    [Trident,0,0,0,1],

    [Trident,0,1,0,0],

    [Trident,0,0,1,1],

    [Trident,0,0,1,1],

    [Trident,0,0,1,1],

    [Trident,0,0,0,0],

    [Gecko,1,1,1,1],

    [Gecko,0,0,0,1],

    [Other browsers,1,0,0,U]

] }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

answered 12 Years ago julissaimana · Accepted Answer

I was able to get it to work using the datables mrenderer

$(document).ready(function () {

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

        aoColumnDefs: [{

            aTargets: [0],

            //mData: download_link,

            mRender: function (data, type, full) {

                if (data == Gecko) {

                    return '<a href=' + data + '>' + data + ' Download Gecko</a>';

                } else {

                    return '<a href=' + data + '>' + data + ' Download</a>';

                }

            }

        }, {

            aTargets: [1],

            //mData: download_link,

            mRender: function (data, type, full) {

                if (data == 1) {

                    return '<input type=checkbox checked value=' + data + '>';

                } else {

                    return '<input type=checkbox value=' + data + '>';

                }

            }

        }, {

            aTargets: [2],

            //mData: download_link,

            mRender: function (data, type, full) {

                if (data == 1) {

                    return '<input type=checkbox checked value=' + data + '>';

                } else {

                    return '<input type=checkbox value=' + data + '>';

                }

            }

        }, {

            aTargets: [3],

            //mData: download_link,

            mRender: function (data, type, full) {

                if (data == 1) {

                    return '<input type=checkbox checked value=' + data + '>';

                } else {

                    return '<input type=checkbox value=' + data + '>';

                }

            }

        }, {

            aTargets: [4],

            //mData: download_link,

            mRender: function (data, type, full) {

                if (data == 1) {

                    return '<input type=checkbox checked value=' + data + '>';

                } else {

                    return '<input type=checkbox value=' + data + '>';

                }

            }

        }],

        bFilter: false,

        sScrollY: 500px,

        bPaginate: false,

        bProcessing: true,

        sAjaxSource: sources/sample.json

    });

});