Ask Me Help Desk

Ask Me Help Desk (https://www.askmehelpdesk.com/forum.php)
-   PHP (https://www.askmehelpdesk.com/forumdisplay.php?f=454)
-   -   Php-how to display data based on filtering in codeigniter (https://www.askmehelpdesk.com/showthread.php?t=834315)

  • Sep 10, 2017, 07:31 PM
    Var91
    Php-how to display data based on filtering in 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
      PHP Code:

      $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

    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?

  • All times are GMT -7. The time now is 06:51 AM.