Php-how to display data based on filtering in codeigniter
I'm currently developing a web page that has below condition:
- when the page 1st load, it will display the data based on the
PHP Code:
$data["wipsumdata"] = $result;
- when user input the date needed in text box for Date Filter or input data in text box for Quick Search , the table will show the data needed based on the date filtering in
PHP Code:
$data["wipsumdata1"] = $result;
This is the php syntax used:
PHP Code:
switch( $page ) {case "summary" :
$this -> smarty -> assign("page", "Summary WIP");
$query = "";
$query2 = "";
$result = $this -> global_model -> query($query) -> result();
$data["wipsumdata"] = $result;
$result1 = $this -> global_model -> query($query2) -> result();
$data["wipsumdata1"] = $result1; break;
This is the template:
Code:
<!-- A lot of Table -->
<div class="hunter-main-table">
<!-- slideshow idea container -->
<div class="wip-container">
<div class="wip-slider">
<!--get schedule latest date, prepare for datatable filter-->
<input type="hidden" id="wipDate" value="{$pageDate}"/>
<input type="hidden" id="todayDate" value="{$todaydate}"/>
<table class="SummaryTable table table-nomargin dataTable-display table-borderd usertable">
<thead>
<tr>
{if $pageType == "summary"}
<th style="text-align: center; width : 1px !important;">No</th>
<th style="text-align: center;width:80px !important;">Customer</th>
<th style="text-align: center;width:60px !important; ">Jobsheet No.</th>
<th style="text-align: center;width:200px; !important">Product Description</th>
<th style="text-align: center;width:60px; !important">Article No / Old Article</th>
<th style="text-align: center;width:20px !important;">Size / Color</th>
<th style="text-align: center;width:10px !important;">Order Quantity</th>
<th style="text-align: center;width:20px !important;">Ship Date</th>
<th style="text-align: center;width:20px !important;">Material Status</th>
<th style="text-align: center;width:20px !important;">Cutting Status</th>
<th style="text-align: center;width:20px !important;">PVC Printing Status</th>
<th style="text-align: center;width:20px !important;">Fab Printing Status</th>
{/if}
</tr>
</thead>
<tbody>
{if $pageType == "summary"}
{$i = 1}
{foreach from=$wipsumdata item=row}
<tr>
<td>{$i}</td>
<td><div title="Customer" class='tablediv'>{$row -> cust_name}</div><span onClick='expandView(this);' class='tabletitle'>Read More</span></td>
<td title="Jobsheet">{$row -> idmsul}</td>
<td><div title="Product Description" class="tablediv">{$row -> pro_desc}</div><span onClick='expandView(this);' class='tabletitle'>Read More</span></td>
<td title="Articleno">{$row -> articleno} {if $row -> oldarticleno != ''}/{/if} {$row -> oldarticleno}</td>
<td title="Size/Colour">{$row -> size} / {$row -> colour}</td>
<td title="Order Qty">{$row -> qty}</td>
<td title="Ship Date">{$row -> shipdate}</td>
<td title="Material Status">{$row -> finalarr}</td>
<td title="Cutting Status">{if $row -> cutactstart == ''}TBA{else}{$row -> cutactstart}{/if} <br> - <br> {if $row->cutactend == '0000-00-00'}{$row -> cutactstart}{else}{$row -> cutactend}{/if}</td>
<td title="PVC Printing Status">{if $row -> prnactstart !== '' && $row -> prnactend !== ''}{$row -> prnactstart}<br> - <br> {$row -> prnactend}{else if $row->prnactstart !='' and $row-> prnactend == ''}WIP{else}No Print Part{/if}</td>
<td class="{if {$row->fabprnact} == 'Open'}status-flamingo{else if {$row->fabprnact} == 'Complete'}status-green{else if {$row->fabprnact} == 'Partial'}status-yellow{/if}">
{if {$row->fabprnact} =='Partial'}
<a href="http://sindisvr2/sindisys/sewcutrptsummary?pro={$row ->idmsul}" target="blank">{$row->fabprnact}</a>
{else}
{$row->fabprnact}{/if}</td>
</tr>
{$i = $i + 1}
{/foreach}
{* --- end of summary wip --- *}
This is the javascript syntax:
Code:
$(function(){
var oTable,
sumTable,
tableWidth = $(".hunter-table").width();
// Summary Table from summary page
$(".SummaryTable").length > 0 && $(".SummaryTable").each(function() {
if (!$(this).hasClass("dataTable-custom")) {
var e = {
sPaginationType : "full_numbers",
sDom : '<"voon"fl>rt<"joon"ip>',
oLanguage : {
sSearch : "<span class='vccc'>Date Filter :</span><select id='wipFilter'></select><span>Quick Search :</span> ",
sInfo : "Showing <span>_START_</span> to <span>_END_</span> of <span>_TOTAL_</span> entries",
sLengthMenu : "_MENU_ <span>entries per page</span>"
}
};
if ($(this).hasClass("dataTable-display")) {
e.iDisplayLength = 10;
e.bDeferRender = !0;
}
ggTable = $(this).dataTable(e);
$(".dataTables_filter input").attr("placeholder", "Search here...");
$(".dataTables_length select").wrap("<div class='input-mini'></div>").chosen({
disable_search_threshold : 9999999
});
}
}); // end summary table
// caching DOM and bind event
$(".hunter-table").each(function(){
var $this = $(this),
$container = $this.find("div.wip-container"),
$dummyMain = $this.find("div.hentai-main"),
$dummyScroll = $dummyMain.find("div.hentai-scroll"),
$dummy = $dummyScroll.find("div.dummy-scroll"),
$voon = $container.find("div.wip-slider").find("div.voon"),
$wipFilter = $voon.find("select#wipFilter"),
$joon = $container.find("div.wip-slider div.joon"),
$table = $container.find("div.wip-slider table"),
$span = $table.find("span.tabletitle"),
$datestr = $container.find("input#wipDate"),
$dateoption = $datestr.val(),
$todaydate = $container.find("input#todayDate"),
poch = $todaydate.val();
// asyn scroll bar with the original one
$dummyScroll.css("width",tableWidth + "px");
$dummy.css("width",( $table.width() + 10) +"px");
// scroll event
$container.on("scroll",function(){
var pixel = $(this).scrollLeft();
$voon.css("margin-left", pixel + "px");
$joon.css("margin-left", pixel + "px");
// update dummy scroll bar
$dummyScroll.scrollLeft(pixel);
});
// when scrolling dummy, update the original one
$dummyScroll.on("scroll",function(){
var pixel = $(this).scrollLeft();
$container.scrollLeft(pixel);
});
// when window Resize, update the dummy scroll width
$(window).resize(function(){
var width = $(".hunter-table").width();
$dummyScroll.css("width",width + "px");
});
$(window).on("scroll",function(){
var container = $container.offset().top;
if($(this).scrollTop() > container ) {
$dummyMain.addClass("revFixed");
} else {
$dummyMain.removeClass("revFixed");
}
});
// filter by date
$wipFilter.append($dateoption)
.change(function(){
var val = $(this).val();
if(val === 'all') {
ggTable.fnFilter("");
} else {
ggTable.fnFilter(val,7);
}
});
// auto filter after page landing
// this statement must go before the previous one
$wipFilter.children("option[value^='" + poch +"']").prop("selected","selected").change();
}); // end cache dom
});
My question is how can I alter the below code to make the above 2nd condition?
Code:
// filter by date
$wipFilter.append($dateoption)
.change(function(){
var val = $(this).val();
if(val === 'all') {
ggTable.fnFilter("");
} else {
ggTable.fnFilter(val,7);
} });
And
Code:
$(".SummaryTable").length > 0 && $(".SummaryTable").each(function() {
if (!$(this).hasClass("dataTable-custom")) {
var e = {
sPaginationType : "full_numbers",
sDom : '<"voon"fl>rt<"joon"ip>',
oLanguage : {
sSearch : "<span class='vccc'>Date Filter :</span><select id='wipFilter'></select><span>Quick Search :</span> ",
sInfo : "Showing <span>_START_</span> to <span>_END_</span> of <span>_TOTAL_</span> entries",
sLengthMenu : "_MENU_ <span>entries per page</span>"
}
};
if ($(this).hasClass("dataTable-display")) {
e.iDisplayLength = 10;
e.bDeferRender = !0;
}
ggTable = $(this).dataTable(e);
$(".dataTables_filter input").attr("placeholder", "Search here...");
$(".dataTables_length select").wrap("<div class='input-mini'></div>").chosen({
disable_search_threshold : 9999999
});
} });
This is the image show how I want it to work
https://drive.google.com/file/d/0B46...t2ZnhVWkE/view
Can anybody please assist me on this?
