Ask Experts Questions for FREE Help !
Ask
    Var91's Avatar
    Var91 Posts: 1, Reputation: 1
    New Member
     
    #1

    Sep 10, 2017, 07:31 PM
    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?

Check out some similar questions!

Read a text and extract data and display it in JTables [ 0 Answers ]

Sir, My problem is to read a text file which contains lines of text data{e.g: #1115=CLOSED_SHELL(",(#166,#208,#250.....#1114));} . I need to break it and #numbers in braces are assigned to string array and they should cal by one by one. similarly next level on calling #166 same operation ...

Your task is to display on screen the 'N' symbol given two data: the length and the c [ 0 Answers ]

Your task is to display on screen the 'N' symbol given two data: the length and the character symbol to use to draw the symbol. If the input of the user is less than 3, print "Erros: Length must be greater than 2" and ask again the user to input a valid length. This program repeats unless the...

Your task is to display on screen the 'N' symbol given two data: the length and the c [ 0 Answers ]

Your task is to display on screen the 'N' symbol given two data: the length and the character symbol to use to draw the symbol. If the input of the user is less than 3, print "Erros: Length must be greater than 2" and ask again the user to input a valid length. This program repeats unless the...

Display data in next jsp page [ 1 Answers ]

I want to display a set of data in a jsp page . On one jsp page , I select one date This date is present in a form, and it is passed onto a servlet file from where, a database query is accessed This query compares the date entered by user, and that date present in a database table Then, selects...


View more questions Search