Question

我正在研究Asp.Net MVC4中的JQuery Data Table。如果我将数据绑定到表，则需要超过30秒才能加载500行。我无法确定是否找到了这个问题。请帮我解决这个问题。提前谢谢。

这是我的数据表代码。

var oTable = $('#myDataTable').dataTable();
$('#myDataTable').dataTable({
    "bDestroy": true,
        "bProcessing": true,
        "bSearchable": true,
        "sAjaxSource": '@Url.Action("GetReportDetails", "DailyReport")',
        "bVisible": true,
        "bDeferRender": true,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": true,
        "oLanguage": {
        "sProcessing": '<img src="../../Scripts/DataTables-1.9.4/page-loader.gif" />'
    },
        "fnDrawCallback": function (oSettings) {
        if (oSettings.bSorted || oSettings.bFiltered) {
            for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
                $('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
            }
        }
    },
        "aoColumns": [{
        "mData": "DailyReport",
        align: 'left',
        sWidth: '18%',
            "bVisible": false,
            "mRender": function (data, type, full) {
            return "<div class='scrollcol' width='80%'>" + data + "</div>";
        }
    }, {
        "mData": "Achivement",
        align: 'left',
            "bVisible": false,
            "mRender": function (data, type, full) {
            return "<div class='scrollcol' style='width:145px'>" + data + "</div>";
        }
    }, {
        "mData": "Comment",
        align: 'left',
        sWidth: '4%',
            "bVisible": false,
            "mRender": function (data, type, full) {
            if (data != null) return "<div class='scrollcol'>" + data + "</div>";
            else return "<div class='scrollcol'></div>";
        }
    }, {
        "mData": "Rating",
            "bSortable": false,
        align: 'left',
            "bVisible": false
        }
    }, {
        "mData": "CreatedBy",
        align: 'left',
            "bVisible": false
    },

    ],
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
        $(nRow).on('click', function () {
            var dReportId = aData.DReportId;
            var achive = aData.Achivement;
            var comment = aData.Comment;
            document.getElementById('comment').value = comment;
            document.getElementById('hidNxtIndexId').value = iDisplayIndex;
        });
    }
});
});

这是我的HTML：

<table id="myDataTable">
    <thead>
        <tr>
            <th>Daily Report</th>
            <th>Achievement</th>
            <th>Comments</th>
            <th>Ratings</th>
            <th>Created By</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

为了加速数据表，您可以尝试以下三个选项： -

javascript数组肯定会有所帮助，因为您可以获得延迟渲染的好处。目前浏览器正在创建500行，然后从HTML中读取所有行，这很慢。将其转储到数组中，然后使用aaData或data（在较新版本中）选项将其提供给DataTables。
而不是一次渲染所有数据，延迟加载可以帮助您 - 例如。如果页面滚动到您渲染的列表底部+ 100，依此类推前100个项目。
如果您不想要客户端选项，那么您也可以在服务器端上进行一些优化（通过优化返回500条记录的查询。）。
< / LI>

将数据绑定到JQuery Data Table太慢了

1 个答案: