0

I have a jQuery data table individual column searching. I want a select list with checkboxes in each column, which would be driving the filtering options, something visually like what ColVis does (http://datatables.net/extras/colvis).

I tried to bind a jQuery event handler to the checkbox and call fnFilter() with the required filtering parameters on the table, but I can't do it. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>  
<html>  
<head>  

<script type="text/javascript" src="https://.../test/SiteAssets/jqueryy-
3.2.0.min.js"></script>
    <link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">  
<link rel="stylesheet" type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables
.jqueryui.min.css">  
<script type="text/javascript" 
src=".../test/SiteAssets/jquery.dataTables.min.js"></script>  
</head>  
 <script>

 function loadMyItems() {  
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  
var oDataUrl = siteUrl + 
"/Testing/test/_api/web/lists/getbytitle('Test123')/items?
$select=FirstName,Title,JobTitle,Company,WorkPhone,Email";  
$.ajax({  
    url: oDataUrl,  
    type: "GET",  
    dataType: "json",  
    headers: {  
        "accept": "application/json;odata=verbose"  
    },  
    success: mySuccHandler,  
    error: myErrHandler  
});  
}  

 </script>

<body>  
    <table id="example" class="display" cellspacing="0" width="100%">  
    <thead>  
        <tr>  
            <th>FirstName</th>
            <th>Last Name</th>  
            <th>JobTitle</th>  
            <th>Company</th>  
            <th>Business Phone</th>  
            <th width="18%">Email</th>                
        </tr>  
    </thead>  
     <tfoot>
        <tr>
            <th>FirstName</th>
            <th>Last Name</th>
            <th>JobTitle</th>
            <th>Company</th>
            <th>Business Phone</th>
            <th>Email</th>
        </tr>
    </tfoot> 
</table>   
</body>  
</html>  
<script>

function mySuccHandler(data) {  
try {  
    var dataTableExample = $('#example').DataTable();  
    if (dataTableExample != 'undefined') {  
        dataTableExample.destroy();  
    }  
    dataTableExample = $('#example').DataTable({  
        scrollY: 300,  
        "aaData": data.d.results,  
        "aoColumns": [{  
            "mData": "FirstName"  
        }, {  
            "mData": "Title"  
        }, {  
            "mData": "JobTitle"  
        }, {  
            "mData": "Company"  
        }, {  
            "mData": "WorkPhone"  
        }, {  
            "mData": "Email"  

        }]  
    });  
    } catch (e) {  
    alert(e.message);  
    }  

dataTableExample.columns().every( function () {
var that = this;

$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
    that
        .search( this.value )
        .draw();
}
} );
} );
}  

function myErrHandler(data, errCode, errMessage) {  
alert("Error: " + errMessage);  
}  

$(document).ready(function() {  
loadMyItems();  

// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
    } );
} );

</script>
0

there's no select with checkboxes control in HTML you'll have to create your own Checkbox list and use CSS to manage its visibility.

here's an example:

How to create checkbox inside dropdown?

for the filtering i'll recommend you to add a class, tag , id or other selector to the results of each row so you can filter your results.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.