Hi,
I would like to do searching from my filtered data.
My data is presented in table and the displayed data in the table is based on [Package] column which I put as a dropdown list on top of the table.
My problem is;
- when I searched, the result will shows all the data from db containing that keyword, regardless of the data from [Package] filter.
What I have tried:
Here is my Html code;
<!--Select package-->
<div class="col-xs-3 col-md-3 col-lg-3" style="padding-bottom: 15px">
<label>Select Package</label>
<select class="form-control" data-bind="options: PackageList, value:SelectedPackage">
<option data-bind="text: $data"></option>
</select>
</div>
<!--Search-->
<div class="col-xs-3 col-md-3 col-lg-3">
<div class="row" style="display:flex; justify-content:flex-end; margin-right:1px">
<div class="input-group">
<div class="input-group-addon">
<span>
Search
</span>
</div>
<input id="SearchText" type="text" class="form-control" placeholder="[Input Search Item]" data-bind="value: SearchText, event:{ change: GetRejects}">
</div>
</div>
</div>
</div>
Here is my Js;
self.PackageList = ko.observableArray();
self.GetPackageList = function () {
$.ajax({
url: '/QC/GetPackageList',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.PackageList(data.PackageList);
}
}).done(function (data) {
});
}
self.SelectedPackage = ko.observable();
self.viewInventory = ko.observableArray();
self.SelectedPackage.subscribe(function (value) {
$("#loading").show();
$.ajax({
url: '/QC/ViewInventory',
cache: false,
type: 'GET',
data: { value },
contentType: 'application/json; charset=utf-8',
success: function (dataServer) {
self.viewInventory(dataServer.DataReject);
$("#loading").hide();
}
});
});
self.SearchText = ko.observable("");
self.SearchById = ko.observable(true);
self.RejectList = ko.observableArray();
self.GetRejects = function () {
var keyword = self.SearchText();
if (keyword === "") {
self.GetInventory();
return;
}
$("#loading").show();
$.ajax({
url: '/QC/SearchReject',
cache: false,
type: 'GET',
data: {keyword},
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.viewInventory(data.allResults);
$("#loading").hide();
}
});
}
$(document).ready(function () {
self.GetPackageList();
});
And here is my controller;
public ActionResult GetPackageList()
{
var db = new SMLPORTALEntities();
var packageList = db.SML_QC_SokuteiRejects.Select(a => a.Package).Distinct().ToList();
var result = new { Ok = "OK", PackageList = packageList};
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult ViewInventory(string value)
{
var smlPortal = new SMLPORTALEntities();
var dataReject = smlPortal.SML_QC_SokuteiRejects.Where(a=> a.Package == value).Select(a => a).OrderByDescending(a => a.Date).Take(10);
var result = new { status = "OK", DataReject = dataReject };
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult SearchReject(string keyword)
{
var db = new SMLPORTALEntities();
var rejectsData = db.SML_QC_SokuteiRejects.Where(a => a.Location.Contains(keyword) || a.LotNo.Contains(keyword)
|| a.Package.Contains(keyword)
|| a.PlasticNo.Contains(keyword) || a.Types.Contains(keyword)
|| a.Remarks.Contains(keyword) || a.OperatorID.Contains(keyword)
|| a.WeekYear.Contains(keyword))
.Select(a => a).ToList();
var result = new { OK = "OK", allResults = rejectsData };
return Json(result, JsonRequestBehavior.AllowGet);
}