Help get a checkbox selection column in my DataDables (Editor) table PLEASE

SeanDevoy

I just want a column with a checkbox at the beginning of each row to select the row (for deletion) with inline field editing. Also, I would love to see the TypeName edit inline with a <select> field.

I have searched and tried everything I can come up with. The example if for datatables based on an existing html table. I am using server-side DT Editor and ajax to PHP files generated from this site.

PHP and JS files attached. JS file renamed with .txt extension so I could attach it.

Thanks in advance for your advice.

Sean

kthorngren

You can use the Select Extension to do this. Follow this example:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Kevin

SeanDevoy

Kevin,
Thanks for your response. As my original request stated, I have seen that example and tried every possible adaptation I can think of to fit it to a datatable based on AJAX data, instead of an existing html table.
Maybe you could look at my two files and tell me what to do? Perhaps the issue is my use of "columns" instead of "columnDefs"???

kthorngren

Sorry, didn't see anything in your original post stating you looked at the example I posted. Also I don't see in your table.DirectoryListings.js.txt file any code where you are trying to use a checkbox. It wasn't clear what you tried.

Since you are using columns.data there is a bit of additional config you need from the example:

columns: [
    { "data": null,
      "defaultContent": "",
      "orderable": false,
      "className": 'select-checkbox',
    },
    { "data": "DirectoryTypes.TypeName" },
    { "data": "DirectoryListings.ListingName" }
],

Checkout columns.defaultContent. You will need three columns defined in your table and make sure to load the select extension JS and CSS include files.

Here is an example of using select field with Editor:
https://editor.datatables.net/examples/simple/fieldTypes.html

Kevin

SeanDevoy

AH HA!!! Thanks so much Kevin. I should have paid more attention to what I uploaded, I had tried 20 different versions!

I had EXACTLY what you showed except "defaultContent" which creates the extra column required. I had a checkbox showing, but it was on top of my data!

SeanDevoy

Hey Kevin. Sorry to say that does not work. I get no errors as alerts or in the console, but I also get no rows??? I definitely have 3 columns in the table. No example on the column.defaultContent page work with AJAX and the generated PHP. on the server. Do I need to send a null column from the server?

kthorngren

Here is an ajax loaded example using the above code:
http://live.datatables.net/mikajuku/1/edit

The example is not returning anything for the checkbox column.

EDIT: Just want to add that I use this config on many of my ajax loaded pages.

Can you post a link to your page or update the example to show the problem?

Kevin

SeanDevoy

HI Again. This is a real hack job, but I did get some result. It just dies with ANY reference to null. I repeated the first data column, set the CSS for the checkbox and "render"ed the value hidden! There has to be a cleaner way.

        select:true,
        columns: [
            {
                "data": "DirectoryTypes.TypeName",
                "defaultContent": "",
                "orderable": false,
                "className": 'select-checkbox',
                "render": function (data, type, row) {
                    return "<value style='display:none' >'" + data + "'</value>" ;
                }
            },
            { "data": "DirectoryTypes.TypeName" },
            { "data": "DirectoryListings.ListingName" }
        ],

kthorngren

Try changing "data": "DirectoryTypes.TypeName", to "data": null, in the checkbox column.

Kevin

SeanDevoy

Yep, tried that (again). No errors but no more rows displayed.

            {
                "data": null,
                "defaultContent": "",
                "orderable": false,
                "className": 'select-checkbox',
                "render": function (data, type, row) {
                    return "<value style='display:none' >'" + data + "'</value>" ;
                }

kthorngren

What are you trying to put in this column, ie, why do you have a render function?

I thought you were using it just as a row selection checkbox.

Not sure why no rows are being displayed. If you can't provide a link to your page then use the debugger and provide the resulting link.

Kevin

SeanDevoy

I use inline editing in many tables for this application. That makes it difficult to "select" a row for deletion. The customer asked for an extra column with a checkbox for selection -JUST LIKE THE SAMPLE YOU REFERENCED!

I found my error. With the first column defined as a duplicate of the new second column everything worked - if I rendered the column as blank. If I changed the first column to "null", It appeared as if I got no rows. DUH - I had a search on column(0) which filtered everything away when the new column 0 was blank.

Thanks for your help and patients. The debugger is great.

allan

Good to hear you have it working now. Thanks for posting back.

Allan