I am struggling to understand how to add a filter to each column. To set things up, I never add any header or footer HTML code into the .cshtml since datatables really doesn't need it. This keeps the page cleaner and I am looking for a way to continue down this path.
What I want to be able to do is to use something like the columns property and have it create the filter header for me. If you look at the columns properties that I am using below, you can see that I can tell it what data to pull from the json and what the title of the column should be. I have to imagine that there is another property that I am just not seeing or understanding that will allow the filter to show up over the column?
What I am hoping to be able to do is to say something like this:
{ data: "InvoiceDate", title: "Invoice Date", filter: true }
Here is my code snippet:
var table = $('#example').DataTable({
dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'lB>>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
buttons: ['copy', 'excel', 'pdf', 'print'],
responsive: true,
processing: true,
serverSide: true,
paging: true,
pageLength: 25,
lengthMenu: [[10,25,50,100,-1], [10,25,50,100,"All"]],
ajax: {
type: "POST",
url: 'BillingDataHandler'
},
columns: [
{
"class": 'details-control',
orderable: false,
data: null,
title: '',
defaultContent: ''
},
{ data: "InvoiceDate", title: "Invoice Date" },
{ data: "InvoiceNumber", title: "Invoice Number" },
{ data: "DispatchId", title: "Dispatch Id" },
{ data: "CustomerName", title: "Customer Name" },
{ data: "GrossAmount", title: "Gross Amount" },
{ data: "VoucherAmount", title: "Voucher Amount" },
{ data: "Verified", title: "Verified" },
{ data: "VerifiedBy", title: "Verified By" }
]
});
Thanks for any and all help!