Я новичок в использовании slickgrid и пытаюсь загрузить 1200 записей, используя его.Время, необходимое для загрузки данных, составляет около 6 секунд (это довольно много).Как сократить время загрузки с сервера?Я видел некоторые примеры в SO, но ни один из них не помог мне.
Один из подходов заключается в первоначальной загрузке первых 100 записей как можно скорее, а затем загрузке оставшихся элементов внизу.Как я могу добиться этого?
Вот мой код:
<script>
var grid;
var columns = [
{ id: "Class", name: "Class", field: "Class", formatter: alignFormatter1},
{ id: "Number", name: "Number", field: "Number", formatter: alignFormatter2},
{ id: "Subject", name: "Subject", field: "Subject",formatter: alignFormatter3},
{ id: "Student", name: "Student", field: "Student", formatter: alignFormatter4},
{ id: "Date", name: "Date", field: "Date", formatter: alignFormatter5},
];
function dayFormatter(row, cell, value, columnDef, dataContext) {
//return value + ' days';
}
function dateFormatter(row, cell, value, columnDef, dataContext) {
//return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
}
function alignFormatter1(row, cell, value, columnDef, dataContext) {
return "<span style='margin-left: 32px;'>"+dataContext.Class+"</span>";
}
function alignFormatter2(row, cell, value, columnDef, dataContext) {
return "<span style='margin-left: 22px;'>"+dataContext.Number+"</span>";
}
function alignFormatter3(row, cell, value, columnDef, dataContext) {
return "<span style='margin-left: 10px;'>"+dataContext.Subject+"</span>";
}
function alignFormatter4(row, cell, value, columnDef, dataContext) {
return "<span style='margin-left: 32px;'>"+dataContext.Student+"</span>";
}
function alignFormatter5(row, cell, value, columnDef, dataContext) {
return "<span style='margin-left: 95px;'>"+dataContext.Date+"</span>";
}
var options = {
enableCellNavigation: true,
enableColumnReorder: true,
multiColumnSort: true,
editable: true
};
$(function () {
var MS_PER_DAY = 24 * 60 * 60 * 1000;
var data = [];
var listdata = <?php echo json_encode($storeData)?>;
console.log(listdata);
for (var i = 0; i < listdata.length; i++) {
data[i] = {
Class: listdata[i][0],
Number: listdata[i]['1'],
Subject: listdata[i]['2'],
Student: listdata[i]['3'],
Date: listdata[i]['4'],
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: false }) );
grid.registerPlugin(checkboxSelector);
grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;
data.sort(function (dataRow1, dataRow2) {
for (var i = 0, l = cols.length; i < l; i++) {
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) {
return result;
}
}
return 0;
});
grid.invalidate();
grid.render();
});
})
</script>
<script type="text/javascript">
var awidth,aheight,newheight;
awidth=$(window).width();
aheight=$(window).height();
newheight=aheight*0.9-150;
newheight = newheight | 0;
document.getElementById('myGrid').setAttribute("style","height:"+newheight+"px;");
</script>
ПРИМЕЧАНИЕ: На основании предложения из комментариев, код php добавляется
<?php
$sql = "SELECT * FROM university_marks WHERE 1 ".$where. "ORDER BY Date desc";
//echo $sql;
$searchdetails = mysql_query( $sql );
$num_rows = mysql_num_rows($searchdetails);
$storeData = array();
$i= 0;
while ($row = mysql_fetch_array($searchdetails)) {
$storeData[$i][] = $row['ID'];
$storeData[$i][] = $row['1'];
$storeData[$i][] = $row['2'];
$storeData[$i][] = $row['3'];
$storeData[$i][] = $row['4'];
$storeData[$i][] = $row['5'];
$sql4 = "SELECT * FROM `faculty_address` WHERE id = $id and address!= '' ";
$adddetails4 = mysql_query($sql4);
$facultydetails4 = mysql_fetch_assoc($adddetails4);
$num_rows5 = mysql_num_rows($adddetails4);
if($num_rows5 > 0){
$storeData[$i][] ='Filled';
}
else{
$storeData[$i][] ='Notfilled';
}
$sql5 = "SELECT * FROM `students_attendence` WHERE id = '".$id."' AND ID_course='".$course."'";
$adddetails5 = mysql_query($sql5);
$csipdetails5 = mysql_fetch_assoc($adddetails5);
$num_rows6 = mysql_num_rows($adddetails5);
if($num_rows6 > 0){
$storeData[$i][] ='Filled';
}
else{
$storeData[$i][] ='Notfilled';
}
$sql6 = "SELECT * FROM `students_marks` WHERE CA_ID = $id AND column1!= '' AND column2 !='' AND column3 !='' ";
$adddetails31 = mysql_query($sql31);
$studetails31 = mysql_fetch_assoc($adddetails31);
$num_rows41 = mysql_num_rows($adddetails31);
if($num_rows41 > 0){
$storeData[$i][] ='Filled';
}
else{
$storeData[$i][] ='Notfilled';
}
$i++;
}
?>
Из предложений в комментариях я получил проблему узкого места при выполнении SQL-запросов в php.SQL-запросы отнимают слишком много времени, что приводит к задержке.Мне нужны эти значения при заполнении данных столбца в slickgrid ($ sql4, $ sql5, $ sql6,)