Checkbox to Select Row in Editor

andyr

I am trying to display a checkbox in the first table column. This is not part of the database. The only purpose is to select one row, so that enables the TableTool Edit/Delete buttons.
Per https://editor.datatables.net/examples/inline-editing/simple.html I did not put anything for the Editor.fields for the checkbox column. What then displays is nothing in that column. What do I really need for the DataTable.columns and the Editor.Fields options for that checkbox. Below is what I have so far:

  "tableTools": {
          "sRowSelect": "single",
          "sRowSelector": "td:first-child",
           "aButtons": [
                 { "sExtends": "editor_create", "editor": editor },
                 { "sExtends": "editor_edit", "editor": editor },
                 { "sExtends": "editor_remove", "editor": editor }
             ]
}
...

 $('#TSSRAvail').DataTable( {
...
 {  
      "data": null,
      "type": "checkbox",
      "defaultContent": "",
       "orderable": false,
  },

allan

"type": "checkbox",

This won't work in DataTables as the columns.type option refers to the data type, not what is displayed.

You want to drop that, and then use the CSS from that page (click the "CSS" tab below the table):

table.dataTable tr td:first-child {
        text-align: center;
    }
 
    table.dataTable tr td:first-child:before {
        content: "\f096"; /* fa-square-o */
        font-family: FontAwesome;
    }
 
    table.dataTable tr.selected td:first-child:before {
        content: "\f046"; /* fa-check-square-o */
    }
 
    table.dataTable tr td.dataTables_empty:first-child:before {
        content: "";
    }

You need to include FontAwesome for that to work. You could also use Unicode if you preferred not to include another asset (thinking about it, I might update my examples to do that...).

Editor.Fields

Nothing needed for that as it is a client-side column - the server-side need no nothing about it and you've told DataTables not to read any data from the data source for the column on account of using columns.data and setting it to null.

Allan

andyr

Thanks Alan. I removed the DataTable...columns...type = "date". I added the CSS below. I will ask a coworker about using FontAwsome and downloadable fonts:

 table.dataTable tr td:first-child {
    text-align: center;
 }
table.dataTable tr td:first-child:before {
    content: "\2610"; /* Unicode ballot box */
}
table.dataTable tr.selected td:first-child:before {
    content: "\2611";  /* Unicode ballot box with check  */
}
table.dataTable tr td.dataTables_empty:first-child:before {
    content: "";
}