CODEWITHSUNDEEP
javascriptjquerymysqlcodeigniterdatatables
Jerielle
Jerielle

Reputation: 7520

How can i call SQL query and load it to DATATABLE plugin using CodeIgniter and jquery?

I hope you can help me. My problem is I want to load a huge amount of data total of 50000 rows in my datatable plugin but I dont know how to incorporate it with CodeIgniter framework. Here's my sample data.

In my controller i create a function like this, for testing purposes I didn't put it in my model.

public function displayListItem(){
   $sqlSelectAll = "select * from items";
   $resultSelectAll = $this->db->query($sqlSelectAll);
   echo json_encode($resultSelectAll->row_array());
}

Next is my view to call the SQL:

  <!-- jquery part -->
  <script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "<?php echo site_url("item_controller/displayListItem"); ?>"
        } );
    } );

Below is my table that will populate my data from mysql database

 <table id="example">
                    <thead>
                          <tr>
                            <th></th>
                            <th>CODE</th>
                            <th>NAME</th>
                            <th>DESCRIPTION</th>
                                 <th>BRAND</th>
                            <th>UNIT</th>
                            <th>CATEGORY NAME</th>
                            <th>ENTRY DATE</th>
                            <th>ACTION</th>
                          </tr>
                    </thead> 
                    <tbody>
                       <!-- THIS IS THE PART WHERE I NEED TO PUT THE DATA, BUT I DON'T KNOW HOW --> 

                    </tbody>
                 </table>

That's all guys I hope you can help me. Thanks

Upvotes: 0

Views: 2831

Answers (1)

Gourav
Gourav

Reputation: 1774

Firstly keep the media folder in the codeigniter project folder. media folder is one which is required by datatables which contains the js,images and css files. set your base_url in codeigniter config.php. setup your database in codeigniter database.php. setup your url helper $autoload['helper'] = array('url'); in autoload.php.

This is my controller.

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

  class Welcome extends CI_Controller 
 {


     public function index()
    {

    $this->load->model('cmodel');
    $data['d']=$this->cmodel->get_result();
    $this->load->view('welcome_message.php',$data);//$data is an array which is sent to view
    }
 }

The $data['d'] contains the array returned from the model which is sent to view

This is my model.

  <?php

   class Cmodel extends CI_Model 
   {
         function __construct()
         {
            parent::__construct();
         }

        function get_result()
        {
          $query=$this->db->query("your custom query;");
          return $query->result_array();//return the result_array to the controller.
        }
    }

    ?>

This is the view

 <!DOCTYPE html>
 <html lang="en">
    <head>
    <meta charset="utf-8">
     <title> CodeIgniter</title>

        <style>
            *{
                font-family: arial;
             }
            </style>

           <style type="text/css">
                  @import "<?php echo base_url();?>media/css/demo_table_jui.css";
                  @import "<?php echo base_url();?>media/themes/smoothness/jquery-ui-1.8.4.custom.css";
                </style>

          <script src="<?php echo base_url();?>media/js/jquery.js" type="text/javascript"></script>
            <script src="<?php echo base_url();?>media/js/jquery.dataTables.js" type="text/javascript"></script>

      <script type="text/javascript" charset="utf-8">
                    $(document).ready(function(){
          $('#datatables.dataTables_filter input').focus()
                    $('#datatables').dataTable({
                      "sPaginationType":"full_numbers",
                      "aaSorting":[[2, "desc"]],
                          "bJQueryUI":true

                    });
                 })

               </script>
 </head>
 <body>
      <div>
           <table id="datatables" class="display">
             <thead>
               <tr>
               <th>id</th> <!-- These are the table heading-->
               <th>name</th>
               <th>order</th>         
                    </tr>
         </thead>
            <?php foreach($d as $row):?><!--This is how you access the fields  -->
             <tr>
             <td>
                <?php echo $row['id'];?>
            </td>
            <td>
                <?php echo $row['name'];?> <!-- here id,name,order are my column names-->
            </td>
             <td>
                <?php echo $row['order'];?>
            </td>
             </tr>
         <?php endforeach?>
     </table>
     </div>
      </body>
 </html>

This will work perfectly. please vote

Upvotes: 1

Related Questions