Add Checkbox Functionality

wuwu

Hi, I just want to add checkbox functionality on the datatables with a checkbox on the header too to check all. I am using server side processing. Can you help me? thanks.

kthorngren

There are lots of ways to use checkboxes. Please provide more details of what your are wanting to do with them. Like do you need to store the state in the DB, are you using them with Editor, what needs to happen when clicking on the checkbox?

You can use them with the Select Extension, Editor, or create your own. You can use the Gyrocode checkbox plugin which incorporates the use of Select.

There are lots of threads on the forum that might help.

Kevin

wuwu

Hi Kevin, I will use it to select rows that I will process on a click of a button. I am using server side processing and want also to have a checkbox on the header to select/deselect all. What would be my declaration on my "columns" option on my first column for checkbox as { "data": "fieldname" }? Thanks,

kthorngren

Did you look at the links I provided? They show how to add the checkboxes. Do you have specific questions?

Kevin

wuwu

Hi Kevin, yes i look into it and it seems that it just added a blank column in the first column of the header and the records still display starting on the first. This is how i declare my columns and columnDef. How will I declare my checkbox field under columns?

    "columns": [
        { "data": "LineNo" },
        { "data": "Product" }
    ],
    'columnDefs': [
        {
            'targets': 0,
            'checkboxes': {
                'selectRow': true
            }
        }
    ],
    'select': {
        'style': 'multi'
    },
    'order': [[1, 'asc']]

kthorngren

Looks like you opted to use the Gyrocode plugin. You will want to do something like this:

"columns": [
    {
        'targets': 0,
        'checkboxes': {
            'selectRow': true
        }
    },
    { "data": "LineNo" },
    { "data": "Product" }
],

You will have 3 columns in your table.

it seems that it just added a blank column in the first column of the header

Did you include the gyrocode plugin CSS and JS files?

Kevin

wuwu

H Kevin, I managed to display the checkbox already using the declaration on "columnDefs" because when I use the one in "columns", it has datatables error but it will still display without checkbox.

When I use "columnDefs", the checkbox will display already on first column and select /deselect on header works too. But my problem is the display on the two columns. Product column will be the second column and the LineNo which should be the first column when no checkbox, did not display. It seems that the checkbox has overwrite its value. Any ideas? thanks

wuwu

Hi Kevin, it seems that i need also to put ID field on my first column that will serve as my first column?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

wuwu

hi collin, thanks. kevin was able to help me already with this. it is my fault that i did not put any ID field on the first column. thanks again to you and kevin...