How to display filtered database values in HTML table using a dropdown list in CodeIgniter?

Question

I am new to CodeIgniter and the HMVC framework and I am creating a sample test image dropdown in order to get a blueprint on how to solve the big project that I have on due this week. My question is, how can I able to search and display the filtered database values in a table format by using a dropdown list? For example, If I select on one of the values in the dropdown list and click search, all of the retrieved values will be filtered and will display according to the value selected in the dropdown list. Here is the code for the sample test code for the image dropdown:

Here is the code in my model:

class Image_model extends CI_Model{

    function __construct(){
        parent::__construct();
    }

    /*Sample test model function for the image dropdown list*/

    //display the images table
    public function displayTableImages()
    {
        $query = $this->db->select('main_image, main_image_url');
        $query = $this->db->from('product_master');
        $query = $this->db->get();
        return $query->result();
    }

    //dropdown search list for images
    public function searchDropdownImages($type)
    {
        switch ($type) {

            case 'all':
                {
                    $query = $this->db->where("main_image != '', 'main_image_url != ''");
                }
            case 'with-image':
                {
                    $query = $this->db->where("'main_image != '', 'main_image_url != ''");
                }
            break;
            case 'no-image':
                {
                    $query = $this->db->where("'main_image = ''",  "'main_image_url = ''");
                }   
            break;
            default:
                    $query = $this->db->select('main_image', 'main_image_url');
                    $query = $this->db->from('product_master');
                break;
                    if ($query->num_rows()) {
                    return $query->result();
                    }
            }
    }
    /*End sample test function*/
}

Here is the code for my controller:

if(! defined('BASEPATH')) exit('No direct script access allowed');

class Sample_image_dropdown extends MX_Controller{

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $data['main_view'] = 'sample_view/image_dropdown_view';
        $this->display_table_images();
    }

    public function display_table_images()
    {
        $this->load->model('Sample_model/image_model');
        $data['images'] = $this->image_model->displayTableImages();
        $data['main_view'] = 'sample_view/image_dropdown_view';
        $this->load->view('sample_view/image_dropdown_view', $data);
    }

    public function search_dropdown_images($type)
    {
        $this->load->model('Sample_model/image_model');

        $type['dropdown_images'] = $this->input->post('type');
        switch ($type) {
            case 'all':
                $data['images'] = $this->image_model->get('all');                   
                break;
            case 'with-image':
                $data['images'] = $this->image_model->get('with-image');
                break;
            case 'no-image':
                $data['images'] = $this->image_model->get('no-image');
                break;
            default:
                echo 'There are no images to be returned';
                break;
        }
        $this->load->view('sample_view/image_dropdown_view', $type);
    }
}

Here is the code in my view:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
            <div>
                <?php echo "<select name='type' id='type'>
                                <option value='all'>All Image</option>
                                <option value='with-image'>With Image</option>
                                <option value='no-image'>Without Image</option>
                            </select>" ?>

                <?php echo "<input type='submit' value='Search'>"; ?>
            </div>
            <div>
                <h3>Images</h3>
            </div>
            <div>
                <?php if (isset($images)): ?>
                <?php foreach($images as $image): ?>
                    <table border="1">
                        <tr>
                            <td><?php echo "$image->main_image"; ?></td>
                            <td><?php echo "$image->main_image_url"; ?></td>
                        </tr>
                    </table>
                <?php endforeach; ?>
                <?php endif; ?>
            </div>
    </div>
</body>
</html>

I will gladly appreciate any help/suggestion you can provide with regards to my question.

you seem to be pointed in the right direction... what exactly is not working? — Javier Larroulet
– Javier Larroulet, Commented Dec 26, 2018 at 11:57
@JavierLarroulet I got the main_image and the main_image_url columns to display as a table in HTML and CodeIgniter. My question is though is how can I be able to use the dropdown list in order to search for the images in the table by using the value that I selected in the dropdown list? — aries
– aries, Commented Dec 26, 2018 at 12:01

Rohit Bhadani · Accepted Answer · 2018-12-26 12:14:27Z

2

You should use AJAX for this. First, you have to send a Query from ajax to call controller then Use the controller to load data from the database and Send it as an HTML block to the view and display it. And also make an OnChange event to the drop-down linked to the ajax Hope this one could help you

answered Dec 26, 2018 at 12:14

Rohit Bhadani

1066 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aries Over a year ago

thank you for trying to help. i will try your suggestion if that will work. but i got a quick question. is it possible to use only some PHP code and HTML for this? if it does, can you give me an idea? i will gladly appreciate it..

Rohit Bhadani Over a year ago

No, because without js you cannot set action and you can fetch data just by using html and php but it is not a proper way for instance output. If you are facing some coding issue i can help you

Masih Ansari · Accepted Answer · 2019-01-04 13:14:08Z

Use pagination library and get method to filter your data... get method will help you to create base_url. All you need to do is use your get data in for where statement. the problem you face is when you go to another page you lost your selected option. in controller after writing hole thing just change base_url for configure pagination and set it to

if(isset($_GET))
            {
                $config['first_url']        = $config['base_url'].'/1'.'?'.http_build_query($_GET, '', "&");    
            }

it will help to generate proper link and at your view side .. get the selected value for the selected options..

<select name='type' id='type'>
    <option value='all' <?php echo (isset($_get['type']) && $_get['type'] == 'with-image')?'selected':'';  ?> >
      All Image
    </option>
    <option value='with-image'  <?php echo (isset($_get['type']) && $_get['type'] == 'with-image')?'selected':'';  ?>  >
      With Image
    </option>
    <option value='no-image'  <?php echo (isset($_get['type']) && $_get['type'] == 'no-image')?'selected':'';  ?>  >
       Without Image
    </option>
</select>

Collectives™ on Stack Overflow

How to display filtered database values in HTML table using a dropdown list in CodeIgniter?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related