0
5秒ごとにテーブルを更新するためのコードを記述しています。ここでテーブルが更新されていません（ノックアウトを使用するtableSorter）
私はknocknotと、テーブルのソーターを使用しているデータが更新前のdata..insteadに追加され、その後.... データは、最初の反復で完璧なロードされます。..
は私のコードです：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/knockout-3.4.0.js"></script>
<script src="scripts/knockout.mapping-latest.js"></script>
<link href="scripts/tableSorter/theme.blue.css" rel="stylesheet" />
<script src="scripts/tableSorter/jquery.tablesorter.js"></script>
<script src="https://cdn.jsdelivr.net/tablesorter/2.17.4/js/widgets/widget-scroller.js"></script>
<script src="scripts/tableSorter/jquery.tablesorter.widgets.js"></script>
<title>Dynamic Data from sqlData</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" data-bind="value: vm.AccountArray().length" />
<table border="1">
<thead>
<tr>
<th>accountNumber
</th>
<th>accountName
</th>
<th>account balance
</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: AccountArray, as: 'Account' }">
<tr>
<td data-bind="text: Account.AccountNumber"></td>
<td data-bind="text: Account.AccountName"></td>
<td data-bind="text: Account.AccountBalance"></td>
</tr>
</tbody>
</table>
</div>
</form>
<script>
function Account(accountNumber, accountName, accountBalance) {
this.AccountNumber = ko.observable(accountNumber);
this.AccountName = ko.observable(accountName);
this.AccountBalance = ko.observable(accountBalance);
}
var viewModel;
var table;
var hg;
var vm = new function() {
this.amount = ko.observableArray();
this.AccountArray = ko.observableArray();
}
$(function() {
table = $("table").tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'stickyHeaders', 'filter', 'scroller', 'resizable'],
widgetOptions: {
reorder_axis: 'x', // 'x' or 'xy'
reorder_delay: 100,
reorder_helperClass: 'tablesorter-reorder-helper',
reorder_helperBar: 'tablesorter-reorder-helper-bar',
reorder_noReorder: 'reorder-false',
reorder_blocked: 'reorder-block-left reorder-block-end',
reorder_complete: completed,// callback
scroller_height: 300,
scroller_barWidth: 17
}
});
$('.tablesorter-scroller-table').css({
height: '',
'max-height': '300px'
});
function completed() {
}
function AutoReload() {
$.ajax({
type: "POST",
url: "Dynamic_Data_Creation.aspx/GetDataAjax",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (response) {
hg = $('.tablesorter-scroller-table').prop("scrollTop");
vm.AccountArray.removeAll();
vm.AccountArray().length = 0;
vm.AccountArray.valueHasMutated();
ko.mapping.fromJSON(response.d, null, vm.AccountArray); // updata response data
$("table").trigger("update");
$('.tablesorter-scroller-table').prop("scrollTop", hg); // updating the scroll position to table
$('.tablesorter-scroller-table').css("scrollTop", $('.tablesorter-scroller-table').prop("scrollTop"));
setTimeout(function() { AutoReload(); }, 5000); //reload on every 5 seconds.
},
failure: function (response) {
alert(response.d);
}
});
}
AutoReload();
});
ko.applyBindings(vm);
</script>
</body>
</html>
jQueryウィジェットを使用するには、バインディングハンドラが必要です。 http://stackoverflow.com/questions/14593367/how-to-work-with-jquery-table-sorter-with-knockout –
私が$（ "table"）を置いたときに動作するコードfind（ "tbody" ）。空の（）; AccountArrayを空にした後 – RJV