Question

我有一个DataTable，其中显示了API中的所有值。现在，我有一个“详细信息”列，其中有带有删除按钮的href标记。我想添加一个类名或ID，但会引发错误。这是example。

我想获取行值并删除数据。你能帮我吗？

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Subject</th>
           <th>Message</th>
           <th>Details</th>
         </tr>
        </thead>
 </table>

脚本：

  $(document).ready(function() {
        $('#example').DataTable({
            "processing" : true,
            "ajax" : {
                "url" : "https://api.myjson.com/bins/un18a",
                dataSrc : ''
            },
            "columns" : [ {
                "data" : "name"
            }, {
                "data" : "email"
            }, {
                "data" : "subject"
            }, {
                "data" : "message"
            },
            {
                    "mData": "Details",
                    "mRender": function (data, type, row) {
                        return "<a id="delete" href='/Details/" + row.id + "'>Delete</a>";
                    }
            }]
        });
    });

Answer 1

更新

尝试这个new one

this

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson.com/bins/un18a",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "name"
        }, {
            "data" : "email"
        }, {
            "data" : "subject"
        }, {
            "data" : "message"
        },
        {
                "mData": "Details",
                "mRender": function (data, type, row) {
                console.log(row)
                    return "<a class='delete' data-obj='" + JSON.stringify(row)
 + "' href='/Details/" + row.id + "'>Delete</a>";
                }
        }]
    });
    $(document).on("click", ".delete", function(e) {
        e.preventDefault()
        let data = $(this).data("obj")
        alert("Name: " + data.name + " Email: " + data.email + " Subject: " + data.subject + " Message: " + data.message ) 
    })
});

Answer 2

我认为这是可行的，请像在您的JSFiddle示例中尝试的那样尝试。

$(document).ready(function() {
$('#example').DataTable({
    "processing" : true,
    "ajax" : {
        "url" : "https://api.myjson.com/bins/un18a",
        dataSrc : ''
    },
    "columns" : [ {
        "data" : "name"
    }, {
        "data" : "email"
    }, {
        "data" : "subject"
    }, {
        "data" : "message"
    },
    {
            "mData": "Details",
            "mRender": function (data, type, row) {
                return "<a id='rec1' class='thisclass' href='/Details/" + row.id + "'>Delete</a>";
            }
    }]
});

}）;

还要添加css块

.thisclass{
 color:red;
}

Answer 3

import Foundation
var allUsers = [Users]()
var allPosts = [Posts]()
class Posts: Codable {
    let userId: Int
    let id: Int
    let title: String
    let body: String
}
class Users: Codable {
    let id: Int
    let name: String
    let username: String
}
let postURL = URL(string: "https://jsonplaceholder.typicode.com/posts")
let userURL = URL(string: "https://jsonplaceholder.typicode.com/users")
//let jsonData = try! Data(contentsOf: postURL!)
func parseJSON(){
    URLSession.shared.dataTask(with: postURL!) { (data, response, error) in
        guard let data = data else { print("error with data"); return }
        do {
            allPosts = try JSONDecoder().decode([Posts].self, from: data);
            //interupt the main thread and update the table with the retrieved data

            dump(allPosts)
        } catch let err {
            print("Error: ", err)
        }
    }.resume() // start the network call
    URLSession.shared.dataTask(with: userURL!) { (data, response, error) in
        guard let data = data else { print("error with data"); return }
        do {
            allUsers = try JSONDecoder().decode([Users].self, from: data);
            //interupt the main thread and update the table with the retrieved data
            dump(allUsers)
        } catch let err {
            print("Error: ", err)
        }
        }.resume() // start the network call
}

}）;

使控制器具有删除功能，即https://api.myjson.com/bins/un18a/Details/ {id}路由呼叫时调用的功能

如何使用DataTables获取行值并删除数据？

3 个答案: