$ (document) .ready (function () не может вызвать функцию в контроллере

Question

Я использую таблицу данных для отображения большого количества строк из базы данных. Я использовал приведенный ниже код для отображения данных, извлеченных из базы данных, но, поскольку данные начали увеличиваться, загрузка занимает много времени, так как в запросе выбора есть несколько объединений.

Ниже приведен код, который занимает много времени для загрузки представления:

    <script>
        $(document).ready(function() {
                $('#fileData').dataTable({
                    "aLengthMenu": [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "All"]],   
                    //"aaSorting": [[ 4, "desc" ]], 
                    "iDisplayLength": <?php echo 5; ?>, 
                    'bProcessing'    : true,
                    'bServerSide'    : false,
                    "oTableTools": {
                        "sSwfPath": "assets/media/swf/copy_csv_xls_pdf.swf",
                        "aButtons": []
                    },
                    "oLanguage": {
                        "sSearch": "Filter: "
                    },  
                    "aoColumns": [ 
                        null,
                        null,
                        null,
                        null,
                        null,
                        null,
                        null,
                        null,
                        null,
                        null
                    ],
                    "aoColumns": [
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                        {"bVisible": true},
                                        {"bVisible": true}
                    ]   
                }).columnFilter({ aoColumns: [
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                    { type: "text", bRegex:true },
                                { type: "text", bRegex:true }
                ]});
            });
    </script>
    <table id="fileData" class="table table-striped table-bordered table-hover table-full-width">
                                        <thead>
                                            <tr>
                                                <th>Sl.No</th>
                                                <th>Type</th>
                                                <th>No </th>
                                                <th>0-15 yrs M</th>
                                                <th>0-15 yrs F</th>
                                                <th>15-45 yrs M</th>
                                                <th>15-45 yrs F</th>
                                                <th>Above 45 yrs M</th>
                                                <th>Above 45 yrs F</th>
                                                                                            <th>Cumulative Since April</th>
                                                <th>Remarks</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <?php //if(is_object($proj_workers_report)) {  
                                        ?>
                                            <?php foreach ($nreports->result() as $index=>$row) { ?>
                                                <tr> 
                                                            <td> <?php echo $index + 1; ?> </td>
                                                            <td><?php echo $row->test1; ?></td>
                                                            <td><?php echo $row->test2; ?></td>
                                                            <td><?php echo $row->test3; ?></td>
                                                            <td><?php echo $row->test4; ?></td>
                                                            <td><?php echo $row->test5; ?></td>
                                                            <td><?php echo $row->test; ?></td>

                                                              </td>
                                                            <td></td>
                                                </tr>
                                            <?php
                                            } ?>
                                        </tbody>
                                    </table>
After searching for solution to reduce loading time i found solution as enabling "serverSide":true.so i changed the code as below

$(document).ready(function () {
        var year="<?php echo base_url() . 'reportc/new_disease_morbidity_report'; ?>";
        alert(year);
        var dataTable = $('#example2').DataTable({  
          "processing":true,  
          "serverSide":true,  
          "order":[[ 0, "desc" ]],  
          "ajax":{  
        url:"<?php echo base_url() . 'test/nreport'; ?>",   
        type:"POST",
        data:"{'id':year}",
        success: function (data) {
                alert("success");
            },
            error: function () {
                alert('error');
            }
        },  
        'language': {
                "emptyTable":"No patient available"
            },
        "columnDefs":[  
        {  
        //"targets":[0, 3],  
        //"orderable":false,  
        },  
          ],  
         });  
        controller:
        function new_disease_morbidity_report()
            {
                $year = $this->input->post('id');
                echo $year; 
        }

Но проблема с новым кодом заключается в том, что он не может вызвать функцию в controller.can кто-нибудь помочь мне сэта проблема. Есть что-то, что я пропускаю?

Answer 1

Просто добавив "serverSide": true вы говорите Datatable позвольте мне обработать нумерацию страниц

Для этого Datatable добавит несколько параметров запроса в API запроса, и в ответ вам нужно установитьНесколько параметров, чтобы позволить нумерации на стороне сервера работать плавно.

Вы на правильном пути. Просто нужно правильно реализовать.

Примечание: Поскольку Datatable будет добавлять несколько параметров, вам нужно обрабатывать их на уровне вашего контроллера. Добавьте эти параметры как @RequestParam. Проверьте ваш вызов API, чтобы получить точные параметры.

1 Datatable добавит следующий параметр в ваш запрос POST/GET

    order:  asc
    start:  20
    length: 10

Это поможет вам в передаче параметра LIMIT в запросе БД.

SELECT * FROM User LIMIT 20,10;

2 Ваш API должен возвращать следующие поля дополнительно

"draw": 3,             // unique ID
"recordsTotal": 57,    // total number of records
"recordsFiltered": 57  // total number of filtered records

Пример демонстрации здесь Пожалуйста, проверьте и проверьте запрос и ответ

Подробнее см. . .