$(document).ready(function() 無法調用 controller 中的 function

Question

我正在使用數據表來顯示數據庫中的大量行。我使用下面的代碼來顯示從數據庫中獲取的數據，但是隨着數據開始增加，加載需要很長時間，因為 select 查詢中有多個連接。

下面是需要大量時間來加載視圖的代碼：

    <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 中調用 function。任何人都可以幫我解決這個問題。我有什么遺漏嗎？

Answer 1

只需添加"serverSide": true您就是在告訴 Datatable讓我處理分頁

為此，Datatable 將 append 請求 API 中的幾個請求參數作為響應，您需要設置幾個參數以使服務器端分頁順利進行。

你走在正確的軌道上。 只需要正確實施。

注意：由於數據表將 append 幾個參數，您需要在 controller 級別處理它們。 將這些參數添加為@RequestParam 。 檢查您的 API 調用以獲取准確的參數。

1 Datatable 將在您的請求POST/GET中添加以下參數

    order:  asc
    start:  20
    length: 10

這將幫助您在 DB Query 中傳遞 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

您可以在此處查看示例演示 請檢查並檢查請求和響應

有關更多詳細信息，請參閱此答案。