无法让我的应用程序的数据表工作。它抛出一个 jQuery 错误

Question

这是我的应用程序视图：http://codepad.org/hQ0qk2jZ

这是我的应用程序的控制器：

    class users extends CI_Controller
    {
public function __construct()
{
    parent::__construct();

    if( ! $this->session->userdata("uid"))
        return redirect("login");

    $this->load->model("admin/user_model", "user");
    $this->load->helper("form");
}

public function index()
{
    $this->load->helper('url');
    $this->load->view('admin/users/main');
}

public function ajax_list()
{

    $list = $this->user->get_datatables();
    $data = array();
    $no = $_POST['start'];
    foreach ($list as $user) {
        $no++;
        $row = array();
        $row[] = $user->firstName;
        $row[] = $user->lastName;
        $row[] = $user->gender;
        $row[] = $user->address;
        $row[] = $user->dob;
        if($user->photo)
            $row[] = '<a href="'.base_url('upload/'.$user->photo).'" target="_blank"><img src="'.base_url('upload/'.$user->photo).'" class="img-responsive" /></a>';
        else
            $row[] = '(No photo)';

        //add html for action
        $row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit_user('."'".$user->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
              <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Hapus" onclick="delete_user('."'".$user->id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';

        $data[] = $row;
    }

    $output = array(
                    "draw" => $_POST['draw'],
                    "recordsTotal" => $this->user->count_all(),
                    "recordsFiltered" => $this->user->count_filtered(),
                    "data" => $data,
            );
    //output to json format
    echo json_encode($output);
}

public function ajax_edit($id)
{
    $data = $this->user->get_by_id($id);
    $data->dob = ($data->dob == '0000-00-00') ? '' : $data->dob; // if 0000-00-00 set tu empty for datepicker compatibility
    echo json_encode($data);
}

public function ajax_add()
{
    $this->_validate();

    $data = array(
            'firstName' => $this->input->post('firstName'),
            'lastName' => $this->input->post('lastName'),
            'gender' => $this->input->post('gender'),
            'address' => $this->input->post('address'),
            'dob' => $this->input->post('dob'),
        );

    if(!empty($_FILES['photo']['name']))
    {
        $upload = $this->_do_upload();
        $data['photo'] = $upload;
    }

    $insert = $this->user->save($data);

    echo json_encode(array("status" => TRUE));
}

public function ajax_update()
{
    $this->_validate();
    $data = array(
            'firstName' => $this->input->post('firstName'),
            'lastName' => $this->input->post('lastName'),
            'gender' => $this->input->post('gender'),
            'address' => $this->input->post('address'),
            'dob' => $this->input->post('dob'),
        );

    if($this->input->post('remove_photo')) // if remove photo checked
    {
        if(file_exists('upload/'.$this->input->post('remove_photo')) && $this->input->post('remove_photo'))
            unlink('upload/'.$this->input->post('remove_photo'));
        $data['photo'] = '';
    }

    if(!empty($_FILES['photo']['name']))
    {
        $upload = $this->_do_upload();

        //delete file
        $user = $this->user->get_by_id($this->input->post('id'));
        if(file_exists('upload/'.$user->photo) && $user->photo)
            unlink('upload/'.$user->photo);

        $data['photo'] = $upload;
    }

    $this->user->update(array('id' => $this->input->post('id')), $data);
    echo json_encode(array("status" => TRUE));
}

public function ajax_delete($id)
{
    //delete file
    $user = $this->user->get_by_id($id);
    if(file_exists('upload/'.$user->photo) && $user->photo)
        unlink('upload/'.$user->photo);

    $this->user->delete_by_id($id);
    echo json_encode(array("status" => TRUE));
}

private function _do_upload()
{
    $config['upload_path']          = 'upload/';
    $config['allowed_types']        = 'gif|jpg|png';
    $config['max_size']             = 100; //set max size allowed in Kilobyte
    $config['max_width']            = 1000; // set max width image allowed
    $config['max_height']           = 1000; // set max height allowed
    $config['file_name']            = round(microtime(true) * 1000); //just milisecond timestamp fot unique name

    $this->load->library('upload', $config);

    if(!$this->upload->do_upload('photo')) //upload and validate
    {
        $data['inputerror'][] = 'photo';
        $data['error_string'][] = 'Upload error: '.$this->upload->display_errors('',''); //show ajax error
        $data['status'] = FALSE;
        echo json_encode($data);
        exit();
    }
    return $this->upload->data('file_name');
}

private function _validate()
{
    $data = array();
    $data['error_string'] = array();
    $data['inputerror'] = array();
    $data['status'] = TRUE;

    if($this->input->post('firstName') == '')
    {
        $data['inputerror'][] = 'firstName';
        $data['error_string'][] = 'First name is required';
        $data['status'] = FALSE;
    }

    if($this->input->post('lastName') == '')
    {
        $data['inputerror'][] = 'lastName';
        $data['error_string'][] = 'Last name is required';
        $data['status'] = FALSE;
    }

    if($this->input->post('dob') == '')
    {
        $data['inputerror'][] = 'dob';
        $data['error_string'][] = 'Date of Birth is required';
        $data['status'] = FALSE;
    }

    if($this->input->post('gender') == '')
    {
        $data['inputerror'][] = 'gender';
        $data['error_string'][] = 'Please select gender';
        $data['status'] = FALSE;
    }

    if($this->input->post('address') == '')
    {
        $data['inputerror'][] = 'address';
        $data['error_string'][] = 'Addess is required';
        $data['status'] = FALSE;
    }

    if($data['status'] === FALSE)
    {
        echo json_encode($data);
        exit();
    }
}

}

这是Output的输出

1. jQuery 库仅在一个地方被调用。
2. 正在调用数据表库。

我仍然无法让这个东西工作。

Answer 1

TLDR - 你缺少一个脚本

您正在加载 dataTables.bootstrap.js，这是 Bootstrap 的样式库：

DataTables 及其扩展都可以通过各种样式设置样式 框架，以确保您的表格无缝融入您的网站/ 应用程序 ~https://datatables.net/download/index

但是您缺少核心数据表库 (jquery.dataTables.js)。检查上面的链接以获取您需要的文件。