Hello, am new to jquery but i want to add date range filter. my table picks data from a jason file

felix2309

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

felix2309

my script

$(document).ready( function () {
    $('#myTable').DataTable(
      

    );
  });
     // Formatting function for row details - modify as you need
  function format(d) {
    // `d` is the original data object for the row
    return (
        '<dl>' +
        '<dt>Case Id:</dt>' +
        '<dd>' + d.caseID + '</dd>' +
        '<dt>Client Id:</dt>' +
        '<dd>' + d.ClientID +'</dd>' +
        '<dt> Zones:</dt>' +
        '<dd>' + d.zones + '</dd>' +
        '<dt>Status:</dt>' +
        '<dd>' + d.Status + '</dd>' +
        '<dt>Start Dates:</dt>' +
        '<dd>' + d.start_dates + '</dd>' +
        '<dt>Referral to:</dt>' +
        '<dd>' + d.referral_given +'</dd>' +
        '<dt>Client Name:</dt>' +
        '<dd>' + d.clientName +'</dd>' +
        '<dt>Client Age:</dt>' +
        '<dd>' + d.Age + '</dd>' +
        '<dt>Village:</dt>' +
        '<dd>' + d.village +'</dd>' +
        '<dt>Settlement:</dt>' +
        '<dd>' + d.settlement +'</dd>' +
        '<dt>Gender:</dt>' +
        '<dd>' + d.gender +'</dd>' +
        '<dt>District:</dt>' +
        '<dd>' + d.District +'</dd>' +
        '<dt>Next of Kin:</dt>' +
        '<dd>' + d.Kin +'</dd>' +
        '<dt>Marital Status:</dt>' +
        '<dd>' + d.marital +'</dd>' +
        '<dt>Tribe:</dt>' +
        '<dd>' + d.tribe +'</dd>' +
        '<dt>Disability:</dt>' +
        '<dd>' + d.disability +'</dd>' +
        '<dt> Level of Education:</dt>' +
        '<dd>' + d.edu +'</dd>' +
        '<dt>sta.ying with:</dt>' +
        '<dd>' + d.company +'</dd>' +
        '<dt>Contact (telephone):</dt>' +
        '<dd>' + d.contact +'</dd>' +
        '<dt>Nationality:</dt>' +
        '<dd>' + d.nation +'</dd>' +
        '<dt>Presenting problems:</dt>' +
        '<dd>' + d.p_problem +'</dd>' +
        '<dt>case assessment:</dt>' +
        '<dd>' + d.assess +'</dd>' +

        '</dl>'
        
        
    );
}



  




 

 
let table = new DataTable('#myTable', {
  

    
   ajax: {url:'cmfetchdata.php' },
    "columns": [
        {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
        },
      {"data": "caseID"},
      {"data": "ClientID"},
      {"data": "zones"},
      {"data": "Status"},
      {"data": "start_dates"},
      {"data": "referral_given"},
      {"data": "clientName", "visible": false},
      {"data": "Age", "visible": false},
      {"data": "village", "visible": false},
      {"data": "settlement", "visible": false},
      {"data": "gender", "visible": false},
      {"data": "District", "visible": false},
      {"data": "Kin", "visible": false},
      {"data": "marital", "visible": false},
      {"data": "tribe", "visible": false},
      {"data": "disability", "visible": false},
      {"data": "edu", "visible": false},
      {"data": "company", "visible": false},
      {"data": "contact", "visible": false},
      {"data": "nation", "visible": false},
      
    ],
    order: [[1, 'asc']],
    dom: 'Bfrtip',
    buttons: [
{ extend: 'copyHtml5'},
{ extend: 'excelHtml5'},
{ extend: 'csvHtml5'},
{
extend : 'pdfHtml5',
title : function() { return "Case Management";},
orientation : 'landscape',
pageSize : 'LEGAL',
text : 'PDF',
titleAttr : 'PDF'
},
{ extend: 'print'}
]

});




 
// Add event listener for opening and closing details
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
 
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
    }
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I would suggest you use SearchBuilder if you want to add complex filtering.

Allan