I just want to use custom search data table for each fields. I do have the following code. But, I’m facing to search the footer search,cause it does search, but no result.
NB:
When I tried to search using the footer search box, it said no data available. But it has data on it.
<!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://...sandbox1/countryprograms/test/SiteAssets/j queryy-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="https://.../countryprograms/test/SiteAssets/j query.dataTables.min.js"></script> </head> <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 loadMyItems() { var siteUrl = _spPageContextInfo.siteAbsoluteUrl; var oDataUrl = siteUrl + "/countryprograms/test/_api/web/lists/getbytitle('Country Contacts')/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 }); } $ (document).ready(function() { loadMyItems(); }); $ (document).ready(function() { // 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(); } } ); } ); } ); 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); } } function myErrHandler(data, errCode, errMessage) { alert("Error: " + errMessage); } </script> 
