Check Boxes In Sharepoint List

jktodd007

I am using Sharepoint list and data tables.
I usaully can use the examples given in the site but for the life of me I can't figure out how to add a check box column to the data table. I don't need to record the items that are checked I just simply need the check boxes for users to "check off" as they are doing the item. I don't understand where to or how to redender the check boxes. I would like them before the area Column.
Also I am loading the below scripts

<script type="text/javascript" charset="utf8" 
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.jqueryui.min.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css"/>
 <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/responsive.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
Below is my code Please help


$(document).ready(function() {
    $('#example').DataTable();

 $('#SpecVersion').on('change',specchange);

  $('#sheetdrp').on('change',questionchange);
});

function specchange(){
  $( "#drpsheet" ).remove();
  ChecklistDrpDownBind();
}

function questionchange(){
   LoadQuestions($('#sheetdrp').val());
}
//fuction to pull Sheet Name
function ChecklistDrpDownBind() { 
       var listName = "FabChecklist"; 

       var url = _spPageContextInfo.webAbsoluteUrl; 
       
        getListItems(listName, url, function (data) { 
            var items = data.d.results; 
              
           var inputElement = '<select id="drpsheet"> <option  value="">Select</option>'; 
               // Add all the new items 
            for (var i = 0; i < items.length; i++) { 
                 var itemId = items[i].Title, 
                   itemVal = items[i].Title; 
                 inputElement += '<option value="' + itemId + '"selected>' + itemId + '</option>'; 
                 
               } 
                inputElement += '</select>'; 
               $('#sheetdrp').append(inputElement); 
   
             $("#drpsheet").each(function () { 
               $('option', this).each(function () { 
  
                  if ($(this).text() == 'Select') { 
                      $(this).attr('selected', 'selected') 
                   }; 
               }); 
            }); 
              // assign the change event to provide an alert of the selected option value 
              $('#drpsheet').on('change', function () { 
             
                  }); 
              
         }, function (data) { 
            alert("Ooops, an error occured. Please try again"); 
        }); 
    } 
   // READ operation 
    // listName: The name of the list you want to get items from 
   // siteurl: The url of the site that the list is in. 
    // success: The function to execute if the call is sucesfull 
   // failure: The function to execute if the call fails 
    function getListItems(listName, siteurl, success, failure) { 
        var Itemspec = document.getElementById("SpecVersion").value;
               $.ajax({ 
           url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=SpecVersion eq" + "'" +  Itemspec +"'", 
           method: "GET", 
           headers: { "Accept": "application/json; odata=verbose" }, 
           success: function (data) { 
               success(data); 
            }, 
           error: function (data) { 
                failure(data); 
            } 
        }); 
   }    
   function LoadQuestions(state)
{
    var ItemSeries = document.getElementById("Series").value;
     var ItemSheet = $('#sheetdrp option:selected').text();
     
             var call = $.ajax({
            url: "https://xxx.sharepoint.com/devPlay/_api/Web/Lists/GetByTitle('ChecklistQuestions')/items?$filter=List eq" + "'" +  ItemSheet +"'",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            },
        
         
        });
        call.done(function (data,textStatus, jqXHR){
           
            $('#example').dataTable({
                "bDestroy": true,
                "bProcessing": true,
                "aaData": data.d.results,
                "oLanguage": {
                 "sSearch": "Filter Questions: "
                   },
                "aoColumns": [
          { "mData": "Area" },   
          { "mData": "Title" },
          { "mData": "Description" },        
          { "mData": "Venue" },
                    
                   
                ]
              });
        });


            call.fail(function (jqXHR,textStatus,errorThrown){
                   alert("Error retrieving Tasks: " + jqXHR.responseText);
               });
       }

allan

Do you mean something like that shown in this example?

Thanks,
Allan

jktodd007

Yes I do mean something like that. I have tried adding it to {"mData": "Area"}
as an attribute as such
{"mData": "Area"
"type": "checkbox",}
area but that does not work the boxes don't align right and can not be checked. I feel like some of it has to do with the fact that I am not doing call on document ready I am waiting until a selection is made.
so I am unsure where to put this part of the code
"fields": [ {
label: "Active:",
name: "active",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}, {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Phone:",
name: "phone"
}, {
label: "City:",
name: "city"
}, {
label: "Zip:",
name: "zip"
}
]
} );

allan

Does the Area property actually have a checkbox it in? The example I linked to makes use of a renderer in the DataTable in order to display the checkbox inside the table itself (rather than just in the form).

Allan

jktodd007

Oh maybe that is why I am having the issue. Mine does not. I just need a way for the user to check off they have done that line. Just to let them visually keep up with what line they are on. I could use Highlighting instead if I could maybe limit that to one column.

kthorngren

Maybe this plugin will help:
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

Kevin

jktodd007

kthorngren
I have tried using that plug in but I am getting multiple API errors in that script

allan

Perhaps you can link to a page showing the issue and we can see if there is anything obvious?

Allan

jktodd007

I got this working here is the code I had to put in to get it working correctly in Sharepoint
"select": {
"style": 'multi',
"selector": 'td:not(:last-child)' // no row selection on last column
},
{ "mData": "Checkbox",
"type": "checkbox",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
} ,