刷新表而不刷新页面

Question

我有一张表，使用基因敲除法显示数组的内容。 我希望能够通过单击列标题对表进行排序。 我的想法是使用javascript .sort（）对数组进行排序，然后刷新表而不刷新页面。 我不知道如何刷新表而不刷新页面。 如果有人能指出我正确的方向，将不胜感激！

现在，它只是一个html表。 一些单元格包含if语句，另一些单元格包含整个表，并且数据库中最多有80条记录。 我不想再进行一次ajax调用，因为数据库中没有任何变化，只想根据单击的标头对数组进行排序。

我添加了onclick函数，但是却收到未定义obj的错误。

这是代码的简化版本：

aspx文件：

<table id="filteredTable">
    <tr>
        <th><button class="btn btn-link btn sm" onclick="SortColumn('TicketTitle')">Title</button></th>
        <th>Priority</th>
    </tr>
<tbody data-bind="foreach: theObject[0]">
    <tr class="tableRow" data-bind="attr: { id: TicketId }">
        <td data-bind="text: TicketTitle"></td>
        <td data-bind="text: TicketPriority"></td>
    </tr>
</tbody>
</table>

js文件：

function pageLoad() {
    var url = API_URL + "/api/Ticket/GetTickets";
    var data = Ajax.getData(url);
    var obj = [];
    var tickets = JSON.parse(data.JsonResult);
    obj.Tickets = tickets;
    Tickets.Data = obj;

    var viewModel = {
        theObject: [obj.Tickets]
    };

    ko.applyBindings(viewModel);
}

function SortColumn(column) {
    obj.Tickets.column.sort();
}

Answer 1

如果您的表显示了数组的元素（使用基因剔除的foreach函数），则不必刷新表...

对数组进行排序将对表进行排序...

但是，如果您想简化生活，我建议您使用DataTables插件

使用此插件，您只需在DOM中绘制表，然后将数据表应用于绘制的表...

---

希望能有所帮助。

问候

---

编辑：

试试这个（基于@Jeroen解决方案 ）：

HTML：

<table>
    <tr>
        <th>
            <!-- Calling a unnamed function to prevent auto-execute of the function 'changeSort' on binding -->
            <button data-bind="click: function() { resetDir('TicketTitle'); changeSort('TicketTitle'); }">Title</button>
        </th>
        <th>
            <!-- Calling a unnamed function to prevent auto-execute of the function 'changeSort' on binding -->
            <button data-bind="click: function() { resetDir('TicketPriority'); changeSort('TicketPriority'); }">Priority</button>
        </th>
    </tr>
    <tbody data-bind="foreach: Tickets">
        <tr class="tableRow" data-bind="attr: { id: TicketId }">
            <td data-bind="text: TicketTitle"></td>
            <td data-bind="text: TicketPriority"></td>
        </tr>
    </tbody>
</table>

Javascript：

function ViewModel(obj) {
    var self = this;

    var sortDir = {
        TicketTitle: "DESC",
        TicketPriority: "DESC",
        LastPressed: ""
    };

    self.Tickets = ko.observableArray(obj.Tickets);

    self.resetDir = function(key) {
        if(sortDir['LastPressed'] != key) sortDir[key] = "DESC";
    }

    self.changeSort = function(newKey) {
        if(sortDir[newKey] == "ASC") sortDir[newKey] = "DESC";
        else sortDir[newKey] = "ASC";

        self.Tickets.sort(function(a, b) {
            if(sortDir[newKey] == "ASC") {
                if(a[newKey] < b[newKey]) return -1;
                if(a[newKey] > b[newKey]) return 1;
                return 0;
            } else {
                if(b[newKey] < a[newKey]) return -1;
                if(b[newKey] > a[newKey]) return 1;
                return 0;
            }
        });

        sortDir['LastPressed'] = newKey;
    };

    self.changeSort("TicketTitle");
}

function pageLoad() {
    // Fake data:
    var obj = {
        Tickets: [
            { TicketId: 1, TicketTitle: "Aaa title", TicketPriority: "C. Low" },
            { TicketId: 2, TicketTitle: "Be a title", TicketPriority: "B. Medium" },
            { TicketId: 3, TicketTitle: "Aaa title", TicketPriority: "A. High" },
            { TicketId: 4, TicketTitle: "Baahaha ya", TicketPriority: "A. High" },
            { TicketId: 5, TicketTitle: "C u later", TicketPriority: "B. Medium" }
        ]
    };

    var viewModel = new ViewModel(obj);

    ko.applyBindings(viewModel);
}

pageLoad();

在JSFiddle中测试代码

Answer 2

我的答案将与之前的答案非常相似，建议使用计算的可观察值来表示排序后的表。 对于您的方案，它可能看起来像这样：

 function ViewModel(obj) { var self = this; self.Tickets = ko.observableArray(obj.Tickets); self.sortKey = ko.observable("TicketTitle"); self.changeSort = function(newKey) { // TODO: Handle asc/desc here too. self.sortKey(newKey); }; self.TicketsSorted = ko.computed(function() { var key = self.sortKey(); return self.Tickets().sort(function(a, b) { return a[key].localeCompare(b[key]); }); }); } function pageLoad() { // Fake data: var obj = { Tickets: [ { TicketId: 1, TicketTitle: "Aaa title", TicketPriority: "C. Low" }, { TicketId: 2, TicketTitle: "Be a title", TicketPriority: "B. Medium" }, { TicketId: 3, TicketTitle: "Aaa title", TicketPriority: "A. High" }, { TicketId: 4, TicketTitle: "Baahaha ya", TicketPriority: "A. High" }, { TicketId: 5, TicketTitle: "C u later", TicketPriority: "B. Medium" } ] }; var viewModel = new ViewModel(obj); ko.applyBindings(viewModel); } pageLoad(); 

 td { padding: 2px 5px; background: #eee; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <table> <tr> <th> <button data-bind="click: changeSort('TicketTitle')">Title</button> </th> <th> <button data-bind="click: changeSort('TicketPriority')">Priority</button> </th> </tr> <tbody data-bind="foreach: TicketsSorted"> <tr class="tableRow" data-bind="attr: { id: TicketId }"> <td data-bind="text: TicketTitle"></td> <td data-bind="text: TicketPriority"></td> </tr> </tbody> </table> 

不确定如何对帖子中丢失的位进行存根（例如数据和如何检索），所以我只是在其中插入了一些简单数据。 （PS。看起来您的Ajax调用是同步处理的？）

Answer 3

在我看来，您可以执行以下操作...

 function refresh(){ var cont = "<table>"+ "<tr>"+/*use loop */ "<td>"+ "name"+ "</td>"+ "<td>"+ "exe"+ "</td>"+ "</tr>"+ "<tr>"+ "<td>"+ "name2"+ "<td>"+ "exe2"+ "</td>"+ "</td>"+ "</tr>"+ "</table>"; return cont; } document.getElementById("tableContainerID").innerHTML = refresh(); 

 <div id="tableContainerID"></div> 

您可以创建一个函数，然后为您提供所有表数据，并像这样调用函数： document.getElementById("tableContainerID").innerHTML = TableDataFunction();

如果您使用jquery，那么也许可以帮到您。