基本的なHTMLの代わりにjQueryとBootstrapを使用してデータテーブルを作成する

Question

私はCodeIgniterを使ってWebアプリケーションを開発しています。私はテーブルを出力してデータベースからデータを追加するためにブートストラップとHTMLを使用しました。しかし、jQueryとBootstrapを使用してデータテーブルを使用することをお勧めしました。私はhttps://datatables.net/のドキュメントを見ようとしましたが、情報を使って学んだことを適用することができませんでした。私は別のJavaスクリプトファイルを作成し、再利用性を促進するために私のビューで呼び出すことを望んでいます。これは私のモデルである

  <div id="page-wrapper"> 
      <div class="row"> 
      <div class="col-lg-12"> 
      <h3 class="page-header"><?php echo $page_header; ?></h3> 
      </div> 
      <!-- /.col-lg-12 --> 
      </div> 
      <!-- /.row --> 
      <div class="row"> 
      <div class="col-lg-12 col-md-6"> 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
      <?php 
      $filter_values = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
      'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; 
      echo anchor("supplier/view", "All"); 
      //make <a> tags for "A" through "Z" 
      foreach($filter_values as $value) 
      { 
      echo anchor("supplier/view/{$value}", " | $value"); 
      } 
      ?> 
      <br><br> 
      <hr> 
      <table class="table table-striped"> 

      <thead> 
      <tr> 
      <th align='left'>Supplier</th> 
      <th align='left'>Contact</th> 
      <th align='left'>Telephone</th> 
      <th align='left'>Email</th> 
      <th align='left'>LPO</th> 
      <th align='left'>Invoice</th> 
      <th align='left'>Profile</th> 
      </tr> 
      </thead> 
      </thead> 

      <?php 
      if(isset($suppliers)): 
      foreach($suppliers as $supplier): 
      ?> 
      <tr> 
      <td><?= $supplier->supplier; ?></td> 
      <td><?= $supplier->contact; ?></td> 
      <td><?= $supplier->telephone; ?></td> 
      <td><?= $supplier->email; ?></td> 
      <td><a href="<?php echo site_url('supplier/function') ?>"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td> 
      <td><a href="<?php echo site_url('supplier/function') ?>"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></td> 
      <td><a href="<?php echo site_url('supplier/function') ?>"><i class="fa fa-user" aria-hidden="true"></i></a></td> 
      </tr> 
      <?php 
      endforeach; 
      else: 
      $msg = isset($filter) ? "No supplier names starting with the letter $filter." : "No Suppliers found."; 
      echo "<td>$msg</td>"; 
      endif; 
      ?> 
      </table> 
      </div><!-- panel-group --> 
      </div> <!-- /.col --> 
      </div> <!-- /.row --> 
      </div> <!-- /#page-wrapper --> 

： ここに私の見解である私は、HTMLテーブルと使用を使用してから逃げる取得したい

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

     class Supplier extends MX_Controller { 

      public function __construct() 
      { 
       parent::__construct(); 
       $this->load->model('supplier_model'); 
       $this->load->module('template'); 
      } 

      public function index() 
      { 
       $data['cities'] = $this->supplier_model->getCity(); 
       $data['modes'] = $this->supplier_model->getPaymentMode(); 
       $data['banks'] = $this->supplier_model->getBank(); 
       $data['categories'] = $this->supplier_model->getCategories(); 
       $data['staffs'] = $this->supplier_model->getStaff(); 
       $data['page_header'] = 'Add/Edit Supplier'; 
       $data['content_view'] = 'supplier/supplier_add'; 
       $data['active_menu'] = 'suppliers'; 
       $data['page_title'] = 'GIFMS | Supplier'; 
       $this->template->load_view($data); 
      } 

      public function save(){ 
       if($this->input->post('submit')) 
       { 
        $this->supplier_model->addSupplier(); 
       } 
       redirect('supplier/view'); 
      } 

      public function view($filter = "All"){ 
       if($filter === "All") 
       { 
        $filter = NULL; 
       } 
       $data['filter'] = $filter; 
       $data['suppliers'] = $this->supplier_model->get_suppliers($filter); 
       $data['page_header'] = 'Suppliers'; 
       $data['content_view'] = 'supplier/suppliers_view'; 
       $data['active_menu'] = 'suppliers'; 
       $data['page_title'] = 'GIFMS | Supplier'; 
       $this->template->load_view($data); 
      } 

      public function get_branches(){ 
       $bank_id = $this->input->post('bank_id'); 
       $bankbranch = $this->supplier_model->getBankBranch($bank_id); 
       foreach($bankbranch as $branch) 
       { 
        echo '<option value="'.$branch['id'].'">'.$branch['bankbranch'].'</option>'; 
       } 
      } 

     } 

：ここ

  <?php    
      class Supplier_model extends MX_Controller 
      { 

      public function __construct() 
      { 
      /* Call the Model constructor */ 
      parent::__construct(); 
      $this->load->database(); 
      } 
      function getCity() 
      { 
      return $this->db->query('SELECT cityidd,city FROM citys')->result_array(); 
      } 
      function getPaymentMode() 
      { 
      return $this->db->query('SELECT id,paymentmode FROM paymentmodes')->result_array(); 
      } 
      function getBank() 
      { 
      return $this->db->query('SELECT id,bankname FROM banks')->result_array(); 
      } 
      function getCategories() 
      { 
      return $this->db->query('SELECT id,supplycategory FROM supplycategories')->result_array(); 
      } 
      function getStaff() 
      { 
      return $this->db->query('SELECT firstname,lastname FROM employees')->result_array(); 
      } 
      function getBankBranch($bank_id) 
      { 
      return $this->db->query('SELECT id,bankbranch FROM bankbranches WHERE bank='.$bank_id)->result_array();; 
      } 

public function get_suppliers($filter) 
{ 
if(isset($filter)) 
{ 
// $filter is not NULL 
$this->db->like('supplier', $filter, 'after'); 
// Uncomment the next line of code and remove the other call 
// to order_by if you only want filtered results sorted 
//$this->db->order_by("supplier", "ASC"); 
} 

$query = $this->db 
->select("supplier,contact,telephone,email") 
->from('suppliers') 
// Remove (or comment) the next line of code 
// if you do not want the suppliers in alphabetical order. 
->order_by("supplier", "ASC") 
->get(); 

return $query->num_rows() > 0 ? $query->result() : NULL; 
} 

       function addSupplier() 
       { 
       //$this->load->database(); do this in the constructor (or in autoload.php) 

       $data = array(
       'supplier' => $this->input->post('supplier'), 
       'taxpin' => $this->input->post('taxpin'), 
       'contact' => $this->input->post('contact'), 
       'addresss' => $this->input->post('addresss'), 
       'city' => $this->input->post('city'), 
       'telephone' => $this->input->post('telephone'), 
       'email' => $this->input->post('email'), 
       'website' => $this->input->post('website'), 
       'paymentmode' => $this->input->post('paymentmode'), 
       'bankaccount' => $this->input->post('bankaccount'), 
       'usdaccount' => $this->input->post('usdaccount'), 
       'bank' => $this->input->post('bank'), 
       'bankbranch' => $this->input->post('bankbranch'), 
       'bankcode' => $this->input->post('bankcode'), 
       'swiftcode' => $this->input->post('swiftcode'), 
       'mobilepaymentnumber' => $this->input->post('mobilepaymentnumber'), 
       'mobilepaymentname' => $this->input->post('mobilepaymentname'), 
       'chequeddressee' => $this->input->post('chequeddressee'), 
       'status' => $this->input->post('status'), 
       'categorysuppliers' => $this->input->post('categorysuppliers'), 
       'staff' => $this->input->post('staff') 
       ); 

       $this->db->insert('suppliers', $data); 
       } 

      } 

は私のコントローラであり、データテーブル私は数時間ドキュメントを見ていて、進歩していません。私は、任意のJavaスクリプトファイルを加えていない、まだ私は、私は私が私がエミュレートを願っサンプルJavaスクリプトファイルがあると思う：あなたはすべての貼り付け

  $(function() { 
      //Show accordion content 
      $('.lpo_accordion h4 a').bind('click', function (e) { 
      //Load lpo data 
      var tableID = '#'+$(this).attr('table_id') 
      var lpoStatus = $(this).attr('lpo_status') 
      //Clear existing table 
      $(tableID).empty('') 
      //Create new table 
      $(tableID).DataTable({ 
      "order": [[ 0, "desc" ]], 
      "destroy": true, 
      "ajax": 'lpo/get_lpo_data/'+lpoStatus, 
      columns: [ 
      {title: 'Request Date'}, 
      {title: 'Title'}, 
      {title: 'Requested By'}, 
      {title: 'Supplier'}, 
      {title: 'Quotation'}, 
      {title: 'Line Items'}, 
      {title: 'Terms'}, 
      {title: 'Amount'}, 
      {title: 'Preview'}, 
      {title: 'Action'} 
      ] 
      }); 
      }); 
      }); 

Answer 1

Javaスクリプトを作成するために管理

$(function() { 
      loadSuppliers('All', 'All') 
      //filter event 
      $('.supplier_name_filter').on('click', function(e){ 
      var filter = $(this).attr("filter_value") 
      loadSuppliers(filter, 'All') 
      }); 
      //status event 
      $('.supplier_status_filter').on('click', function(){ 
      var status = $(this).attr("supplierstatus") 
      loadSuppliers('All', status) 
      }); 
      }); 


      function loadSuppliers(filter, status){ 
      $('#supplier_table').DataTable({ 
      "order": [[ 0, "asc" ]], 
      "destroy": true, 
      "ajax": 'supplier/get_suppliers/'+filter+'/'+status, 
      columns: [ 
      {title: 'Supplier'}, 
      {title: 'Contact'}, 
      {title: 'Telephone'}, 
      {title: 'Email'}, 
      {title: 'LPO'}, 
      {title: 'Invoice'}, 
      {title: 'Profile'}, 
      ] 
      }); 
      }