Javascript 刷新表而不刷新页面

我有一个使用knockoutjs显示数组内容的表。我希望能够通过单击列的标题对该表进行排序。我的想法是使用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>

---

在我看来，你可以这样做。。。但是

函数刷新（）{
var cont=“”+
“”+/*使用循环*/
""+
“姓名”+
""+
""+
“exe”+
""+
""+
""+
""+
“名称2”+
""+
“exe2”+
""+
""+
""+
"";
返回控制；
}
document.getElementById（“tableContainerID”）.innerHTML=refresh（）
如果表中显示了数组的元素（使用knockout的foreach函数），则不能刷新表

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

但是，如果你想简化你的生活，我建议你使用

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


希望这有帮助

问候


编辑：
试试这个（基于）：

HTML:


标题
优先

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();

功能视图模型（obj）{
var self=这个；
变量sortDir={
小标题：“描述”，
票务优先级：“描述”，
最后按下：“
};
self.Tickets=ko.obbservablearray（obj.Tickets）；
self.resetDir=函数（键）{
如果（sortDir['LastPressed']！=键）sortDir[键]=“DESC”；
}
self.changeSort=函数（newKey）{
如果（sortDir[newKey]=“ASC”）sortDir[newKey]=“DESC”；
else sortDir[newKey]=“ASC”；
self.Tickets.sort（函数a、b）{
如果（sortDir[newKey]=“ASC”）{
if（a[newKey]b[newKey]）返回1；
返回0；
}否则{
if（b[newKey]a[newKey]）返回1；
返回0；
}
});
sortDir['LastPressed']=newKey；
};
self.changeSort（“ticketitle”）；
}
函数pageLoad（）{
//伪造数据：
var obj={
门票：[
{TicketId:1，TicketTitle:“Aaa头衔”，TicketPriority:“C.低”}，
{TicketId:2，TicketTitle:“成为一个标题”，TicketPriority:“B.中等”}，
{TicketId:3，TicketTitle:“Aaa头衔”，TicketPriority:“A.高”}，
{TicketId:4，ticketitle:“Baahahaha ya”，TicketPriority:“A.High”}，
{TicketId:5，TicketTitle:“CU稍后”，TicketPriority:“B.中等”}
]
};
var viewModel=新viewModel（obj）；
应用绑定（视图模型）；
}
页面加载（）；

测试中的代码，我的答案与非常相似，建议使用计算的可观察值来表示排序表。对于您的场景，它可能如下所示：


功能视图模型（obj）{
var self=这个；
self.Tickets=ko.obbservablearray（obj.Tickets）；
self.sortKey=ko.可观察（“ticketitle”）；
self.changeSort=函数（newKey）{
//TODO:这里也处理asc/desc。
self.sortKey（newKey）；
};
self.ticketsorted=ko.computed（函数（）{
var key=self.sortKey（）；
返回self.Tickets（）.sort（函数（a，b）{
返回a[key].localeCompare（b[key]）；
});
});
}
函数pageLoad（）{
//伪造数据：
var obj={票证：[
{TicketId:1，TicketTitle:“Aaa头衔”，TicketPriority:“C.低”}，
{TicketId:2，TicketTitle:“成为一个标题”，TicketPriority:“B.中等”}，
{TicketId:3，TicketTitle:“Aaa头衔”，TicketPriority:“A.高”}，
{TicketId:4，ticketitle:“Baahahaha ya”，TicketPriority:“A.High”}，
{TicketId:5，TicketTitle:“CU稍后”，TicketPriority:“B.中等”}
] };
var viewModel=新viewModel（obj）；
应用绑定（视图模型）；
}
页面加载（）
td{padding:2px5px；background:#eee；}

标题
优先
您使用的是数据表还是简单的html表。如果你可以使用一个数据表，然后你可以使用fnDraw（）这个函数为你重新绘制这个表如果你给我们提供代码，也许你会给我们一点帮助哇，我想你可能是对的，这就是敲除的工作原理。我现在就要试试。我遇到一个错误，因为我不知道如何将数组传递给我的SortColumn函数。你不能将数组作为函数参数传递。。。您只需要对创建的数组进行排序以填充表…上面的编辑：您不能将数组作为函数参数传递。。。您只需要对创建的数组进行排序以填充表。。。假设数组名为
theObject
，您应该在SortColumn函数中执行
theObject.sort（）
。可能您应该像这样引用数组：
this.theObject.sort（）
通过将数组放入全局范围解决了错误。但是，当我单击表格标题时，该函数不起作用。数组中的元素的顺序不同，但它们不是按字母顺序排列的。表中行的顺序一点也没有改变，我想
<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>

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();