issues on fnFilter search
issues on fnFilter search
I'm using data Table verison1.10 in java web applications.
oTable.fnFilter(searchString, null, false, true, true, true); is working well in data table version 1.9+... but now it is not working in data table version 1.10. while using 1.10+ version, i'l get the dataTableParamModal objet as null. Please help to solve this issue.
Note : i used oTable.search(searchString).draw(); and oTable.fnFilter(searchString).draw(); functions also, but no use, same null only i got.
This question has an accepted answers - jump to answer
Answers
I've deleted your duplicate question. Please also ensure that you link to a test case in future please, as required in the forum rules.
That is missing the old and new APIs which isn't going to work.
That should work. What error are you getting (as I say, please link a link to a test case so I can provide some help rather than just guessing). My guess is that you need to use
$().DataTable()
- see the second top FAQ.Allan
Dear allan,
i used the "oTable.search(searchString).draw();". but now i get the all request parameters of dataTable objects as null.
i got null as draw, start, length and all.
but without using this normally displaying table, i got the value of draw, start, length only and remaining as null.
what can i do now?
Can you give me a link to the page so I can debug it please.
Allan
Dear allan, i here by i post my code, please help me to solve this issue...
var oTable; $(document).ready(function() { oTable = $('#oTableListId').DataTable({ "dom" : 'T<"clear">lrtip', "processing" : true, "serverSide" : true, "ajax" : { "url" : "filterSearch.do", "type" : "POST" }, "jQueryUI" : true, "pagingType" : "full_numbers", "order" : [ 1, 'desc' ] }); }); function searchFilter() { var position = $("#dt_position").val(); var company = $("#dt_company").val(); var gender = $("#dt_gender").val(); var searchString = gender + "#" + position + "#" + company; oTable.search(searchString).draw(); }<link rel="stylesheet" type="text/css"
href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
As I noted, please link to a test case so I can debug it. The code alone isn't enough as I would need to spend time recreating a test issue myself (I can do that with priority support if you really can't provide a link).
Allan
Dear Allan,
As finally i solved this fnFilter issue... Previously i using search buttton as externally like <button type="sumbit" name="search" onClick="onSearch();">Search</button>
after that i changing <button type="button" name="search" onClick="onSearch();">Search</button>, then it will work perfectly.. the input button type is the problem.
Thankyou allan.
Dear allan,
I hereby post my code, please help me to solve this issue...
<%@ taglib prefix="s" uri="/struts-tags"%>
var oTable; $(document).ready(function() { oTable = $('#oTableListId').DataTable({ "dom" : 'T<"clear">lrtip', "processing" : true, "serverSide" : true, "ajax" : { "url" : "filterSearch.do", "type" : "POST" }, "jQueryUI" : true, "pagingType" : "full_numbers", "order" : [ 1, 'desc' ] }); }); function onReload() { oTable.fnDraw(); } function onCalled(url) { window.location.href = url; } function searchFilter() { var position = $("#dt_position").val(); var company = $("#dt_company").val(); var gender = $("#dt_gender").val(); var finalFilter = gender + "#" + position + "#" + company; oTable.search(finalFilter).draw(); } function onClearCalled() { $("#dt_position").val(""); $("#dt_company").val(""); $("#dt_gender").val(""); }<link rel="stylesheet" type="text/css"
href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
<body
class="page-header-fixed page-quick-sidebar-over-content page-full-width">
<div class="clearfix"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-steel">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-filter"></i>Filters
</div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a> <a
class="sidebar-toggler-wrapper"> </a>
</div>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="overview_1">
<div class="table-responsive">
<div class="portlet-body form">
<s:form class="register-form" action="filterSearch.do"
method="post" name="filterForm" id="filterForm"
show_alert="1" onSubmit="return validateForm()">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Gender</label>
<div class="input-icon">
<i class="fa fa-female"></i> <select
name="searchFilter.gender" id="dt_gender"
title="Gender" class="select2 form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Position</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.position" id="dt_position"
size="28" theme="simple" maxlength="50"
validate="not_empty" tabindex="5"
msg="Position is required" fieldname="position"
placeholder="Position" title="Position" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Company</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.company" id="dt_company" size="28"
theme="simple" maxlength="50" validate="not_empty"
tabindex="5" msg="Company is required"
fieldname="company" placeholder="Company"
title="Company" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks.
<%@ taglib prefix="s" uri="/struts-tags"%>
var oTable; $(document).ready(function() { oTable = $('#oTableListId').DataTable({ "dom" : 'T<"clear">lrtip', "processing" : true, "serverSide" : true, "ajax" : { "url" : "filterSearch.do", "type" : "POST" }, "jQueryUI" : true, "pagingType" : "full_numbers", "order" : [ 1, 'desc' ] }); }); function onReload() { oTable.fnDraw(); } function onCalled(url) { window.location.href = url; } function searchFilter() { var position = $("#dt_position").val(); var company = $("#dt_company").val(); var gender = $("#dt_gender").val(); var finalFilter = gender + "#" + position + "#" + company; oTable.search(finalFilter).draw(); } function onClearCalled() { $("#dt_position").val(""); $("#dt_company").val(""); $("#dt_gender").val(""); }<link rel="stylesheet" type="text/css"
href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
<body
class="page-header-fixed page-quick-sidebar-over-content page-full-width">
<div class="clearfix"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-steel">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-filter"></i>Filters
</div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a> <a
class="sidebar-toggler-wrapper"> </a>
</div>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="overview_1">
<div class="table-responsive">
<div class="portlet-body form">
<s:form class="register-form" action="filterSearch.do"
method="post" name="filterForm" id="filterForm"
show_alert="1" onSubmit="return validateForm()">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Gender</label>
<div class="input-icon">
<i class="fa fa-female"></i> <select
name="searchFilter.gender" id="dt_gender"
title="Gender" class="select2 form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Position</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.position" id="dt_position"
size="28" theme="simple" maxlength="50"
validate="not_empty" tabindex="5"
msg="Position is required" fieldname="position"
placeholder="Position" title="Position" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Company</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.company" id="dt_company" size="28"
theme="simple" maxlength="50" validate="not_empty"
tabindex="5" msg="Company is required"
fieldname="company" placeholder="Company"
title="Company" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<%@ taglib prefix="s" uri="/struts-tags"%>
var oTable; $(document).ready(function() { oTable = $('#oTableListId').DataTable({ "dom" : 'T<"clear">lrtip', "processing" : true, "serverSide" : true, "ajax" : { "url" : "filterSearch.do", "type" : "POST" }, "jQueryUI" : true, "pagingType" : "full_numbers", "order" : [ 1, 'desc' ] }); }); function onReload() { oTable.fnDraw(); } function onCalled(url) { window.location.href = url; } function searchFilter() { var position = $("#dt_position").val(); var company = $("#dt_company").val(); var gender = $("#dt_gender").val(); var finalFilter = gender + "#" + position + "#" + company; oTable.search(finalFilter).draw(); } function onClearCalled() { $("#dt_position").val(""); $("#dt_company").val(""); $("#dt_gender").val(""); }<link rel="stylesheet" type="text/css"
href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
<body class="page-header-fixed page-quick-sidebar-over-content page-full-width">
<div class="clearfix"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-steel">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-filter"></i>Filters
</div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a> <a
class="sidebar-toggler-wrapper"> </a>
</div>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="overview_1">
<div class="table-responsive">
<div class="portlet-body form">
<s:form class="register-form" action="filterSearch.do"
method="post" name="filterForm" id="filterForm"
show_alert="1" onSubmit="return validateForm()">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Gender</label>
<div class="input-icon">
<i class="fa fa-female"></i> <select
name="searchFilter.gender" id="dt_gender"
title="Gender" class="select2 form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Position</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.position" id="dt_position"
size="28" theme="simple" maxlength="50"
validate="not_empty" tabindex="5"
msg="Position is required" fieldname="position"
placeholder="Position" title="Position" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Company</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.company" id="dt_company" size="28"
theme="simple" maxlength="50" validate="not_empty"
tabindex="5" msg="Company is required"
fieldname="company" placeholder="Company"
title="Company" />
</div>
</div>
</div>
</div>
</div>
</body>
And my body content is...
<body class="page-header-fixed page-quick-sidebar-over-content page-full-width">
<div class="clearfix"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-steel">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-filter"></i>Filters
</div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a> <a
class="sidebar-toggler-wrapper"> </a>
</div>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="overview_1">
<div class="table-responsive">
<div class="portlet-body form">
<s:form class="register-form" action="filterSearch.do"
method="post" name="filterForm" id="filterForm"
show_alert="1" onSubmit="return validateForm()">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Gender</label>
<div class="input-icon">
<i class="fa fa-female"></i> <select
name="searchFilter.gender" id="dt_gender"
title="Gender" class="select2 form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Position</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.position" id="dt_position"
size="28" theme="simple" maxlength="50"
validate="not_empty" tabindex="5"
msg="Position is required" fieldname="position"
placeholder="Position" title="Position" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Company</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.company" id="dt_company" size="28"
theme="simple" maxlength="50" validate="not_empty"
tabindex="5" msg="Company is required"
fieldname="company" placeholder="Company"
title="Company" />
</div>
</div>
</div>
</div>
</div>
</body>
And my body content is...
<body class="page-header-fixed page-quick-sidebar-over-content page-full-width">
<div class="clearfix"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-steel">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-filter"></i>Filters
</div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a> <a
class="sidebar-toggler-wrapper"> </a>
</div>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="overview_1">
<div class="table-responsive">
<div class="portlet-body form">
<s:form class="register-form" action="filterSearch.do"
method="post" name="filterForm" id="filterForm"
show_alert="1" onSubmit="return validateForm()">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Gender</label>
<div class="input-icon">
<i class="fa fa-female"></i> <select
name="searchFilter.gender" id="dt_gender"
title="Gender" class="select2 form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Position</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.position" id="dt_position"
size="28" theme="simple" maxlength="50"
validate="not_empty" tabindex="5"
msg="Position is required" fieldname="position"
placeholder="Position" title="Position" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Company</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<s:textfield
cssClass="form-control placeholder-no-fix"
name="searchFilter.company" id="dt_company" size="28"
theme="simple" maxlength="50" validate="not_empty"
tabindex="5" msg="Company is required"
fieldname="company" placeholder="Company"
title="Company" />
</div>
</div>
</div>
</div>
</div>
</body>