Click here to Skip to main content
15,901,373 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

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

HTML
<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:
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??

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

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

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


and
JavaScript
<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
JavaScript
{foreach from=$wipsumdata1 item=row}


in
JavaScript
// 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
Posted
Updated 6-Sep-17 21:39pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900