Column level filter in datatable while binding datable.
Column level filter in datatable while binding datable.
VogeJack
Posts: 1Questions: 1Answers: 0
Hello,
I have set of records that i binding in data table dynamically.
Can you please advise how can I apply column filter in this.
Below is my HTML code,
<table class="table table-striped- table-tracker table-hover" id="tblProfile">
</table>
Below is my binding code of the above table "tblProfile".
<script>
$(document).ready(function () {
var Table;
// Setup - add a text input to each footer cell
Table = $('#tblProfile').DataTable({
"orderCellsTop": true,
"serverSide": true,
"processing": true,
"orderMulti": false, // for disable multiple column at once
"filter": true,// this is for disable filter (search box)
"sAjaxSource": "@Url.Action("WorkorderList", "Workorder")",
"iDisplayLength": 10,
"ordering": true,
"scrollX": false,
"responsive": true,
"language": {
"infoFiltered": ""
},
//"aaSorting": [[0, 'asc', 1, 'asc', 2, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 4 },
{ "orderable": false, "targets": 5 },
{ "orderable": false, "targets": 6 }
],
"fnServerData": function (sSource, data, fnCallback) {
$.ajax({
"dataType": "json",
"type": "POST",
"url": sSource,
"data": data,
"success": fnCallback
});
},
"aoColumns": [
{
"sTitle": "Action", "className": "", overflow: "visible", "orderable": false, render: function (data, type, row, meta) {
var srt;
var temp = row;
srt = '<a href="~/../Workorder/AddWorkOrder?q=' + row.QueryString + '" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill edit-group" title="Edit"><i class="la la-pencil m--font-info"></i></a> <a href="~/../WorkorderAssets/UploadAssets?Id=' + row.WorkOrderId + '" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill edit-group" title="Edit"> <i class="flaticon-file-1"></i></a > <a href="~/../WorkorderAssets/DisplayWorkorderAssest?workorderid=' + row.WorkOrderId + '" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill edit-group" title="View Assets"> <i class="flaticon-file-1"></i></a ><a href="#" onclick="UploadAssets(' + row.WorkOrderId + ');" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill edit-group" title="Upload Documents"><i class="la la-pencil m--font-info"></i></a> '
return srt;
}
},
{
"sTitle": "Workorder No", "className": "", render: function (data, type, row, meta) {
var name = "<strong style='text-transform: capitalize;'>" + row.WorkOrderId + "</strong>";
return name
}
},
{
"sTitle": "PO Number", "className": "", render: function (data, type, row, meta) {
var name = "<strong style='text-transform: capitalize;'>" + row.POnumber + "</strong>";
return name;
},
},
{
"sTitle": "Partner", "className": "", render: function (data, type, row, meta) {
var name = "<strong style='text-transform: capitalize;'>" + row.PartnerName + "</strong>";
return name;
},
},
{
"sTitle": "Customer", "className": "", render: function (data, type, row, meta) {
var name = "<strong style='text-transform: capitalize;'>" + row.CustomerName + "</strong>";
return name;
},
},
{
"sTitle": "Contract", "className": "", render: function (data, type, row, meta) {
var name = "<strong style='text-transform: capitalize;'>" + row.ContractName + "</strong>";
return name;
},
},
{
"sTitle": "Status", "className": "", render: function (data, type, row, meta) {
return row.Status
}
},
{
"sTitle": "Create Date", "className": "", render: function (data, type, row, meta) {
return row.CreateDateString
}
},
{
"sTitle": "Pickup Location", "className": "", render: function (data, type, row, meta) {
return row.PickupAddress
}
},
],
"initComplete": function () {
}
});
});
</script>
This discussion has been closed.
Answers
Hi @VogeJack ,
This example here demonstrates how to do column filtering. The same should apply to your table.
Cheers,
Colin