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

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

SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

    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"???

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

    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!

  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited August 2018

    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

  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

    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" }
            ],
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited August 2018

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

    Kevin

  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1

    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>" ;
                    }
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • SeanDevoySeanDevoy Posts: 13Questions: 4Answers: 1
    Answer ✓

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

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

    Allan

This discussion has been closed.