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

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

felix2309felix2309 Posts: 2Questions: 1Answers: 0

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

Answers

  • felix2309felix2309 Posts: 2Questions: 1Answers: 0
    edited September 2023

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    Allan

Sign In or Register to comment.