Php-how to display data based on filtering in codeigniter

See more:

Javascript

PHP

CodeIgniter

I'm currently developing a web page that has below condition:

1. when the page 1st load, it will display the data based on the

$data["wipsumdata"] = $result; 

2. 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

$data["wipsumdata1"] = $result1;  

this is the php syntax used:

<pre>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 :

<pre><!-- 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 --- *}

and this is the javascript:

<pre>$(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 I don't understand how i can alter the below code to make the above 2nd condition??

// filter by date
$wipFilter.append($dateoption)
.change(function(){

    var val = $(this).val();
    if(val === 'all') {
        ggTable.fnFilter("");
    } else {

        ggTable.fnFilter(val,7);
    }
});

and

<pre>$(".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
Display data based on filtering

Can any buddy assist me on this?

What I have tried:

I try to put the code

{foreach from=$wipsumdata1 item=row}

in

// filter by date
$wipFilter.append($dateoption)
.change(function(){
 
    var val = $(this).val();
    if(val === 'all') {
        ggTable.fnFilter("");
    } else {
 
        ggTable.fnFilter(val,7);
    }
});

but it doesn't work