Question

对于学校项目，我正在创建API并希望实现Jquery Datatables。我还是新手，所以请耐心等待。我已经在Datatables.net网站上浏览了很多例子，但是找不到我正在寻找的答案。我想要实现的是使用我创建的简单API中的数据填充Jquery数据表。

html表：

>>> l = [1, 2, 3, 4, 4, 5, 4, 10, 11, 4]
>>> len(l)
10
>>> Solution().removeElement(l, 4)
6
>>> l
[1, 2, 3, 5, 10, 11]
>>> len(l)
6

datatables.js：

<table id="campaignTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>_id</th>
            <th>name</th>
            <th>email</th>
            <th>position</th>
        </tr>
    </thead>
    <tfoot>
            <th>_id</th>
            <th>name</th>
            <th>email</th>
            <th>position</th>
    </tfoot>
    </table>

api route http://localhost:3030/targets的输出：：

$('#campaignTable').DataTable( {
            "ajax": { 
            "url": "/targets",
            "dataSrc": "data",
        },
             "aoColumns": [

              {"columns": "_id" },
              {"columns": "name" },
              {"columns": "email" },
              {"columns": "position" },
                        ]
                });
});

我能够使用相同的结构用一个简单的变量填充表，但是当使用ajax / rest调用时，它会变得有点困难。其他一些例子表明它可能与api的JSON输出有关。但我不知道如何改变它。

感谢任何帮助，谢谢！

Answer 1

您的语法有两个不同的问题。我将发布改进的js代码（因为那是需要主要更改的代码），然后解释我的更改。

Building native extensions with: '--with-sqlite3-dir=/opt/local -E'
This could take a while...
ERROR:  Error installing sqlite3:
    ERROR: Failed to build gem native extension.

    current directory: /Applications/rubystack-2.2.5-3/ruby/lib/ruby/gems/2.2.0/gems/sqlite3-1.3.11/ext/sqlite3
/Applications/rubystack-2.2.5-3/ruby/bin/ruby -r ./siteconf20160709-86573-198qtg.rb extconf.rb --with-sqlite3-dir=/opt/local -E
checking for sqlite3.h... *** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
    --with-opt-dir
    --without-opt-dir
    --with-opt-include
    --without-opt-include=${opt-dir}/include
    --with-opt-lib
    --without-opt-lib=${opt-dir}/lib
    --with-make-prog
    --without-make-prog
    --srcdir=.
    --curdir
    --ruby=/Applications/rubystack-2.2.5-3/ruby/bin/$(RUBY_BASE_NAME)
    --with-sqlite3-dir
    --with-sqlite3-include
    --without-sqlite3-include=${sqlite3-dir}/include
    --with-sqlite3-lib
    --without-sqlite3-lib=${sqlite3-dir}/lib
/Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:456:in `try_do': The compiler failed to generate an executable file. (RuntimeError)
You have to install development tools first.
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:587:in `try_cpp'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:1113:in `block in find_header'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:911:in `block in checking_for'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:351:in `block (2 levels) in postpone'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:321:in `open'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:351:in `block in postpone'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:321:in `open'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:347:in `postpone'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:910:in `checking_for'
    from /Applications/rubystack-2.2.5-3/ruby/lib/ruby/2.2.0/mkmf.rb:1112:in `find_header'
    from extconf.rb:30:in `<main>'

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /Applications/rubystack-2.2.5-3/ruby/lib/ruby/gems/2.2.0/extensions/x86_64-darwin-10/2.2.0-static/sqlite3-1.3.11/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /Applications/rubystack-2.2.5-3/ruby/lib/ruby/gems/2.2.0/gems/sqlite3-1.3.11 for inspection.
Results logged to /Applications/rubystack-2.2.5-3/ruby/lib/ruby/gems/2.2.0/extensions/x86_64-darwin-10/2.2.0-static/sqlite3-1.3.11/gem_make.out

@Adam是对的，$('#campaignTable').DataTable( { "ajax": "/targets", //One thing is to check is that this is actually the right path //You don't need dataSrc if the source is "data", that's default "columns": [ {"data": "_id" }, {"data": "name" }, {"data": "email" }, {"data": "position" }, ] });已被弃用（但仍然有效）。您应该使用aoColumns语法。
如果您使用columns，则不需要指定dataSrc，因为这是默认设置（但是包含它不应该让您感到伤心如果你不想，不要删除它。如果您修复了所有其他内容并且仍然无法正常工作，请尝试重新使用"data"。
您需要 进行一次更改，但代码段中未显示您的HTML表格中需要包含空dataSrc个标记。这是dataTables将表格中的数据放在哪里。

如果您修复了上述问题并且您的代码仍然无效，那么它可能与您的Ajax调用有关。查看正在发送的请求（如果您不确定如何执行此操作，请使用Fiddler）并确保将GET请求发送到您的<tbody>页面并且正在发回正确的JSON。

Answer 2

感谢那些发布了一些建议的人。似乎有效的实际代码如下：

$(document).ready(function() {

$.ajax({

url: '/targets',
method: 'get',
dataType: 'json',
success: function (data){

$('#targetTable').DataTable( {
        dom: 'Bfrtip',  
        buttons: [
            'csv','pdf'
        ],   
        data: data,                         
        columns: [

              {"data": "_id" },
              {"data": "name" },
              {"data": "email" },
              {"data": "position" },
                ]
            }); 
    }
});


});

我没有考虑的一件事是JSON响应的分页。我现在正在使用feathersJS，它自动将分页添加到我删除的REST服务中。

如何使用ajax rest调用正确填充Datatable JQuery

2 个答案: