为什么html在加载数据表之前完全加载?

时间:2017-06-27 12:05:13

标签: php jquery datatable

对于下载按钮,我有参考页面: https://www.datatables.net/extensions/buttons/examples/initialisation/export.html

对于服务器端,我有参考页面: https://datatables.net/examples/data_sources/server_side.html

我已经在上面介绍了如何使数据表从数据库中获取数据并以不同的格式下载。但主要问题是它首先加载html表。在完全加载html表之后,它显示了对于大量行没有明显的数据表。我必须在datatable中显示大量的行并在excel中导出文件。任何人都可以帮助我如何在不加载html表的情况下加载数据表。

这是我的代码

master  | 1 - 2 - 3 - 5 - 6
                  \
feature |           - 4  

1 个答案:

答案 0 :(得分:1)

  

此代码供您参考,其示例代码如何从数据库中的数据库加载表记录

     

Viewfile

    <table id="placeTable" class="table table-striped table-bordered responsive nowrap">
        <thead class="">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Status</th>
                <th>Action</th>
                <th></th>
            </tr>
        </thead>
    </table> 
</div><!--table-responsive-->
<script>


    jQuery(document).ready(function () {

        jQuery('#placeTable').DataTable({
            "oLanguage": {
                "sProcessing": '<img alt src="<?php echo base_url('assets/images/loaders/CustomLoader.gif'); ?>" style="opacity: 1.0;filter: alpha(opacity=100);">'
            },
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "order": [[4, "DESC"]],
            "ajax": {
                url: "<?php echo site_url('admin/place/getPlace'); ?>",
            },

            "columns": [

                {"taregts": 0, "data": "name"},
                {"taregts": 1, "data": "location"},
                {"taregts": 2,
                    "searchable": false,
                    "orderable": false,
                    "sClass": "text-center",
                    "render": function (data, type, row) {

                        var id = row.id;

                        if (row.is_active === '1') {

                            var out = '&nbsp;<a class="btn btn-success statusenable" href="#" \n\  \n\
                                   title="Click to Change status" data-href="<?php echo site_url('admin/place/change_status') ?>/' + id + '"  data-toggle="modal" data-target="#confirm-status"  title="Confirm">\n\
                               Enable</i></a> ';
                            return out;
                        } else if (row.is_active === '0') {
                            var out = '&nbsp;<a class="btn btn-danger statusenable" href="#" \n\  \n\
                                   title="Click to Change status" data-href="<?php echo site_url('admin/place/change_status') ?>/' + id + '"  data-toggle="modal" data-target="#confirm-status" title="Confirm">\n\
                               Disable</i></a> ';

                            return out;
                        }
                    }
                },
                {"taregts": 3, "searchable": false,
                    "orderable": false,
                    "sClass": "text-center",
                    "render": function (data, type, row) {
                        var id = row.id;
                        return '<a class="actioncol cursor view" href=\'<?php echo site_url('admin/place/view'); ?>/' + id + '\'\n\
                  title="View"><i class="glyphicon glyphicon-eye-open"></i></a>\n\<a class="actioncol cursor view" href=\'<?php echo site_url('admin/place/edit'); ?>/' + id + '\'\n\
                  title="Edit"><i class="glyphicon glyphicon-edit"></i></a>';
                    }
                },
                {"taregts": 4, "visible": false,

                    render: function (data, type, row) {
                        return row.id;
                    }

                }
            ]
        });

    });
</script>
  

Controller Place.php文件

//get all place
    public function getPlace() {

        $columns = array('name', 'location','is_active','id','id');
        $request = $this->input->get();
        $condition = array();

        $getfiled = "name,is_active,location,id";
        echo $this->db_common->getDataTableSource('place', $columns, $condition, $getfiled, $request);
        die();
    }
  

数据库查询模型common.php

 /*
 * This function is to create the data source of the Jquery Datatable
 * 
 * @param $tablename Name of the Table in database
 * @param $datatable_fields Fields in datatable that avalable for filtering
 * @param $condition_array conditions for Query 
 * @param $data The field set tobe return to datatables
 * @param $request The Get or Post Request Sent from Datatable
 * @param $join_str Join array for Query
 * @return JSON data for datatable
 */

function getDataTableSource($tablename, $datatable_fields = array(), $conditions_array = array(), $data = '*', $request, $join_str = array()) {
    $output = array();
    //Fields tobe display in datatable
    $this->db->select($data);
    //Making Join with tables if provided
    if (!empty($join_str)) {
        foreach ($join_str as $join) {
            if (!isset($join['join_type'])) {
                $this->db->join($join['table'], $join['join_table_id'] . '=' . $join['from_table_id']);
            } else {
                $this->db->join($join['table'], $join['join_table_id'] . '=' . $join['from_table_id'], $join['join_type']);
            }
        }
    }
    //COnditions for Query
    if (!empty($conditions_array)) {
        $this->db->where($conditions_array);
    }
    //Total record in query tobe return
    $output['recordsTotal'] = $this->db->count_all_results($tablename, FALSE);

    //Filtering based on the datatable_fileds
    if ($request['search']['value'] != '') {
        $this->db->group_start();
        for ($i = 0; $i < count($datatable_fields); $i++) {
            if ($request['columns'][$i]['searchable'] == true) {

                $this->db->or_like($datatable_fields[$i], $request['search']['value']);
            }
        }
        $this->db->group_end();
    }

    //Total number of records return after filtering not no of record display on page.
    //It must be counted before limiting the resultset.
    $output['recordsFiltered'] = $this->db->count_all_results(NULL, FALSE);

    //Setting Limit for Paging
    $this->db->limit($request['length'], $request['start']);

    //ordering the query
    if (isset($request['order']) && count($request['order'])) {
        for ($i = 0; $i < count($request['order']); $i++) {
            if ($request['columns'][$request['order'][$i]['column']]['orderable'] == true) {
                $this->db->order_by($datatable_fields[$request['order'][$i]['column']] . ' ' . $request['order'][$i]['dir']);
            }
        }
    }

    $query = $this->db->get();
    $output['draw'] = $request['draw'];
    $output['data'] = $query->result_array();

    return json_encode($output);
}`enter code here`
相关问题