0
私は、データがjquery Datatableに表示されるASP.NET Webページの開発に取り組んでいます。私はデータを表示することができますが、私が直面している問題は、情報 "表示のエントリ"が間違った値を表示しています。jquery-datatable：間違っている "<total>のエントリの<range>を表示"メッセージが表示されます
フィドラー：https://jsfiddle.net/8f63kmeo/9/
HTML：
<table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>
JS
var Report4Component = (function() {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
//variables
this.result = null;
}
Report4Component.prototype.ShowGrid = function() {
var instance = this;
//add footer
$('#' + instance.customFilterOnTopControl)
.append('<tfoot><tr><th colspan="2" class="total-text">Total</th><th class="total-value"></th></tr></tfoot>');
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
scrollCollapse: true,
"scrollX": true,
scrollY: "300px",
deferRender: true,
scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
],
initComplete: function (settings) {
var api = this.api(settings);
//now, add a second row in header which will hold controls for filtering.
$(api.table().header()).append('<tr role="row" id="FilterRow">' +
'<th>Desc</th>' +
'<th>Status</th>' +
'<th>Count</th>' +
'</tr>');
//add input controls for filtering
$('#FilterRow th', api.table().header()).each(function() {
var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="return false" placeholder="Search ' + title + '" class="form-control" />');
});
//todo: refactor this code. this is for displaying the scrollbar below the tfoot instead of tbody
//when multiple tables are present, use tablename.find to get the specific class object
//this code is not tested with other options
$('.dataTables_scrollBody').css({
'overflow-x': 'hidden',
'border': '0'
});
$('.dataTables_scrollFoot').css('overflow', 'auto');
$('.dataTables_scrollFoot').on('scroll', function() {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
footerCallback: function (tfoot, data, start, end, display) {
var api = this.api();
if (instance.result == null || instance.result.Total == undefined) {
return;
}
$(api.column(2).footer()).html(instance.result.Total);
}
});
$("div.Notes").html('<div class="alert alert-warning">This is a notes section part of the table dom.</div>');
};
Report4Component.prototype.BindEvents = function() {
var instance = this;
$("#FilterRow th input").on('keyup change', function() {
instance.customFilterOnTopGrid
.column($(this).parent().index() + ':visible')
.search("^" + $(this).val(), true, false, true) //uses regular expression and checks only for starts with
.draw();
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 100; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
instance.result = instance.GetData(limit);
instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
instance.customFilterOnTopGrid.draw();
};
Report4Component.prototype.GetData = function (limit) {
//structure of the response from controller method
var resultObj = {};
resultObj.Total = 0;
resultObj.RecordList = [];
for (var i = 1; i <= limit; i++) {
resultObj.Total += i;
var record = {};
record.Description = "This is a test description of record " + i;
record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
record.Count = i;
resultObj.RecordList.push(record);
}
return resultObj;
};
return Report4Component;
}());
$(function() {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.BindEvents();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
問題：
以下のスナップショットでは、あなたがグリッドに表示さ8つのレコードがあることがわかりますけど、カウントは100の1から1として示していることは、1 100
観察：あなたはページのサイズを変更する場合は
、カウントが正しく表示されているようです。私は、描画ごとにウィンドウのサイズ変更イベントをトリガーしたくありません。この問題を処理するAPIはありますか？
期待：
私はこの問題を修正する必要がありますどのように？どんな提案も感謝しています。
なぜページネーション情報が必要なのですか？ページングではなくスクロールを使用しているようです。私の最初の勘違いは、スクロールのために間違った情報を取得することです。表示行の数に基づいて動的に更新することはありません。 –
「表示中...」というメッセージは、ユーザーがスクロールしてデータを表示しているときのユーザーの現在の位置を示します。この例を参照してください：https://datatables.net/extensions/scroller/examples/initialisation/simple.html –
ああ、私はスクロールがそれを行うことができたことを実現しませんでした。興味深いのは、私が実際の例をフィドルでサイズ変更すると、数字が正しいことです。 –