在 Google 驱动器 API 中使用 jQuery 数据表

Question

我正在研究如何实现 jQuery 数据表来显示这样的数据 http://prntscr.com/s39fcm you can check its working on this website http://sharer.pw

我的代码：

function listFiles() {
gapi.client.drive.files.list({
    'pageSize': 10,
    'fields': "nextPageToken, files(id, name, mimeType)"
}).then(function(response) {

    var files = response.result.files;
    if (files && files.length > 0) {


        for (var i = 0; i < files.length; i++) {
            var file = files[i];


            var dataSet = [
                [file.name, file.mimeType, "<input type='checkbox'/>", "<div class='btn-group'><a class='btn btn-primary' href='#'>Share</a><a class='btn btn-danger'>Delete</a></div>"]
            ];


        }
        $('#example').DataTable({
            data: dataSet,
            columns: [
                { title: "File Name" },
                { title: "Type" },
                { title: "Select" },
                { title: "Action" }
            ]
        });
    } else {
        console.log('No files found.');
    }

});

这段代码只返回一条记录！我还尝试将 $('#example').DataTable({..}); 放在 for 循环中，但它说

http://prntscr.com/s39oyn

Answer 1

我刚刚自己解决了这个问题。下面的代码很有魅力！ :)

在HTML中：

<table id="tab">
<thead>
    <tr>
        <th>File Name</th>
        <th>Type</th> 
        <th>Select</th>
        <th>Action</th>
    </tr>
</thead>

在 JS 文件中：

function listFiles() {
gapi.client.drive.files.list({
    'pageSize': 10,
    'fields': "files(id, name, mimeType)"
}).then(function(response) {

    var files = response.result.files;
    if (files && files.length > 0) {

        for (var i = 0; i < files.length; i++) {
            var file = files[i];

             $('#tab').append($('<tr>')
              .append($('<td>').append(file.name))
              .append($('<td>').append(file.name))
              .append($('<td>').append(file.name))
              .append($('<td>').append(file.name))
            );
        }

            $('#tab').DataTable();

    } else {
        console.log('No files found.');
    }
});
}