Filtered data on page load
Filtered data on page load
Hi ,
I am using datatables with AJAX source and also using external column filters with dropdowns.
I would like to display filtered data on page load.
I tried to write it in fnInitComplete but it didn't helped , also tried fnReloadAjax.
So exactly my need is as follow.
When i load my page it should have data having Value A and i am trying to achieve this using dropdown filters.
It was working perfectly fine without AJAX but it is creating problem while using AJAX.
I am using datatables with AJAX source and also using external column filters with dropdowns.
I would like to display filtered data on page load.
I tried to write it in fnInitComplete but it didn't helped , also tried fnReloadAjax.
So exactly my need is as follow.
When i load my page it should have data having Value A and i am trying to achieve this using dropdown filters.
It was working perfectly fine without AJAX but it is creating problem while using AJAX.
This discussion has been closed.
Replies
Initial filters can be set using oSearch and aoSearchCols .
Allan
Thanks for your response and sorry for not pasting my code.
Here is my code and the way I am initializing my datatable.
[code]
var flag = 0;
var table = ".dataTable"
var bJQueryUI = true;
var sPaginationType = "full_numbers";
var bPaginate = true;
var bLengthChange = true;
var bFilter = true;
var bSort = true;
var bRegex = true;
var aaSorting = [];
var bInfo = true;
var bAutoWidth = true;
var sScrollX = "100%";
var sScrollXInner = "";
var bProcessing = true;
var bScrollCollapse = true;
var iDisplayLength = 200;
var aoColumnDefs = [];
var sScrollY = "auto";
var iCookieDuration = 7200; // default
var sDom = 'C<"clear"><"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"l<"#buttonPlaceholder">fr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';
var bStateSave = true;
var bRetrieve = false; // default
var bScrollAutoCss = true; // default
var bSortCellsTop = false; // default
var iDeferLoading = null; // default
var iDisplayStart = 0; // default
var iScrollLoadGap = 100; // default
var iTabIndex = 0; // default
var oSearch = {"sSearch":""}; // default blank
var sAjaxSource = sAjaxSourceUrl; // default
var sServerMethod = "GET"; // default
var sAjaxDataProp = "aaData"; // default
var sCookiePrefix = "SpryMedia_DataTables_"; // default
var aLengthMenu = [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
]
var oColVis = {"activate":"mouseover",
"bRestore":true,
"sAlign":"left",
"aiExclude":[1],
"fnStateChange":function (iColumn, bVisible) {
var width = $('table.display.dataTable').width() - 1;
$("div.scroll").width(width);
//oTable.fnSetColumnVis( 1, false );
} };
var aoColumns = [
{"mDataProp":"EQPID"},
{"mDataProp":"EQPTYPE"},
{"mDataProp":"DESCRIPTION"},
{"mDataProp":"CAPABILITY"},
{"mDataProp":"ISAVAIL"},
{"mDataProp":"DESCRIPTION1"}
];
var bRemoveSpaces = true;
var bServerSide = true;
var filters = "";
var fnRowCallback = function (nRow, aaData, iDisplayIndex) {
var eqp_id;
if (aaData['EQPID'] != null) {
eqp_id = aaData['EQPID'];
}
else {
eqp_id = ""
}
var warFileName = getWarFileNameFromURL();
//EQUIP?title=Equipment+Details#${record?.EQPID}&All&All&
var href = encodeURI('/' + warFileName + '/equipEqpDetails/index/EQUIP?title=Equipment+Details#' + eqp_id + "&All&All");
$('td:eq(0)', nRow).html('' + eqp_id + '');
$('td:eq(1)', nRow).addClass('tableWidth');
$('td:eq(2)', nRow).addClass('tableWidthComment');
$('td:eq(3)', nRow).addClass('tableWidth');
$('td:eq(4)', nRow).addClass('tableWidth');
$('td:eq(5)', nRow).addClass('tableWidthComment');
/*$('td:eq(6)', nRow).addClass('tableWidth');*/
return nRow;
};
var fnInitComplete = function (oSettings, json) {
//External filter
$('#dataReport').dataTable().columnFilter({aoColumns:[
{ type:"select", sSelector:"#eqpidFilter", bRegex:false },
{ type:"select", sSelector:"#eqptypeFilter", bRegex:false },
null,
{ type:"select", sSelector:"#capabilityFilter", bRegex:false },
{ type:"select", sSelector:"#isAvailFilter", bRegex:false },
null
]}
);
$('.search_init', "#eqpidFilter").css('width', '100px');
$('.search_init', "#eqptypeFilter").css('width', '100px');
$('.search_init', "#capabilityFilter").css('width', '100px');
$('.search_init', "#isAvailFilter").css('width', '100px');
/* Add a select menu for each TH element in the table footer */
$('#dataReport').dataTable().columnFilter({aoColumns:[
{ sSelector:"#EQPIDtxt"},
{ sSelector:"#EQPTypetxt" },
{ sSelector:"#EQPDescriptiontxt" },
{ sSelector:"#Capabilitiestxt" },
{ sSelector:"#isAvailtxt" },
{ sSelector:"#CapabilityDescriptiontxt" }
]}
);
//IF bookmarked URL contians details
if (location.hash != "") {
var hashed_params = location.hash.replace('#', "").split('&');
$('.search_init',"#eqpidFilter").css('width','154px');
$('.search_init',"#eqptypeFilter").css('width','154px');
$('.search_init',"#capabilityFilter").css('width','154px');
$('.search_init',"#isAvailFilter").css('width','154px');
if (hashed_params[0] != "All") {
if ($('select option[value=' + hashed_params[0] + ']', '#eqpidFilter').length == 0 || hashed_params[0] == '') {
$('select', '#eqpidFilter').append('');
$('select', '#eqpidFilter').val("Not Available");
flag = 1;
$("#message").html("Details for Equipment Id : '" + hashed_params[0] + "' not present in Capability.");
$('select', '#eqpidFilter').trigger('change');
}
else {
$('select option[value=' + hashed_params[0] + ']', '#eqpidFilter').attr('selected', true);
//$('select', '#eqpidFilter').val(hashed_params[0]);
//$('select', '#eqpidFilter').trigger('change');
//$('select', '#eqpidFilter').trigger('change');
$('#eqp_message').html('Equipment Id=' + hashed_params[0]);
}
}
if (hashed_params[1] != "All") {
$('select', '#eqptypeFilter').val(hashed_params[1]);
$('select', '#eqptypeFilter').trigger('change');
}
if (hashed_params[2] != "All") {
$('select', '#capabilityFilter').val(escape(hashed_params[2]));
$('select', '#capabilityFilter').trigger('change');
}
if (hashed_params[3] != "All") {
$('select', '#isAvailFilter').val(escape(hashed_params[2]));
$('select', '#isAvailFilter').trigger('change');
}
updateurl();
}
};
oTable = $.fn.initDatatable(table, bJQueryUI, sPaginationType,
bPaginate, bLengthChange, bFilter, bSort, aaSorting, bInfo,
bAutoWidth, sScrollX, sScrollXInner, bProcessing,
bScrollCollapse, iDisplayLength, aoColumnDefs, sScrollY,
iCookieDuration, sDom, bStateSave, bRetrieve, bScrollAutoCss,
bSortCellsTop, iDeferLoading, iDisplayStart, iScrollLoadGap,
iTabIndex, oSearch, sAjaxSource, sServerMethod, sAjaxDataProp, sCookiePrefix, aLengthMenu, oColVis, bRemoveSpaces, bServerSide, aoColumns, fnRowCallback, fnInitComplete, bRegex);
[/code]
I am trying , if filtered URL is bookmarked then it should display filter data only rather than displaying all the data.
Osearch Doesn't work as it get only data in filter in DROPDOWN List .
What i am looking for it should get all data and FILTER table.