使用jQuery和Bootstrap创建数据表，而不是使用基本的HTML

我正在使用CodeIgniter开发一个web应用程序，我使用了bootstrap和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 -->

这是我的模型:

            <?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);
                }
            }

这是我的控制器:

        <?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>';
                }
            }
        }

我想摆脱使用html表和使用数据表。我已经看了几个小时的文件，但没有任何进展。我还没有创建任何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'}
            ]
            });
            });
            });