Question

我有一个在Handlebars中编码的页面，我从nodejs获取json的数据。我正在尝试渲染一个按钮，这是一个第三方按钮。当我不使用DataTables（）时，按钮被正确渲染并单击它们会打开第三方登录窗口以进行进一步处理。

但是，当我启用DataTables时，只有第一页正确呈现并且按钮有效，但当元素数超过10时，它对其他页面不起作用。我不确定这是DataTables的问题还是第三方按钮应该如何表现，但我怀疑当我在DataTables中切换页面时，按钮在渲染时期望的参数未正确发送。我是DataTables的新手。

<body>
<div class="container">
    <div class="jumbotron">
    <h1>Last 100 NSE Annoucements</h1>
    <h3>Top Annoucements by corporates listed on NSE</h3>
    </div>
</div>

<div class="container"> 
    <table class="table table-hover table-responsive table-sm" id="resultTable"">
        <thead>
        <tr>
        <th class="col-sm-1" scope="row">Ticker</th>
        <th class="col-sm-1" scope="row">Link</th>
        <th class="col-sm-2" scope="row">Date</th>
        <th class="col-sm-5" scope="row">Description</th>
        <th class="col-sm-1" scope="row">Trade</th>
        </tr>
        </thead>
        <tbody>
        {{#each feedList}}
        <tr>
            <td> {{this.ticker}} </td>
            <td> <a href="{{this.attachmentLink}}"> {{this.ticker}}</a> </td>
            <td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
            <td> {{this.purposeText}} </br> {{this.summaryText}} </td>
            <td> <span> <kite-button href="#" data-kite="secret_key"
                data-exchange="NSE"
                data-tradingsymbol="{{this.ticker}}"
                data-transaction_type="BUY"
                data-quantity="1"
                data-order_type="MARKET">Buy {{this.ticker}} stock</kite-button> </span></td> 
        </tr>
           {{/each}}
        </tbody>
    </table>
</div>
</body>
    <script>
    $(document).ready(function() {
        $('#resultTable').DataTable({
        "order": [[ 2, "desc" ]],
        "columnDefs" : [{"targets":2, "type":"date"}]
        });
    });</script>
</html>

如何修改此项 - 最有可能在显示每行时自定义呈现按钮？

修改

我试图通过每次自定义渲染按钮来修改DataTable - 但它不起作用。

<body>
<div class="container">
    <div class="jumbotron">
    <h1>Last 100 NSE Annoucements</h1>
    <h3>Top Annoucements by corporates listed on NSE</h3>
    </div>
</div>

<div class="container"> 
    <table class="table table-hover table-responsive table-sm" id="resultTable"">
        <thead>
        <tr>
        <th class="col-sm-1" scope="row">Ticker</th>
        <th class="col-sm-1" scope="row">Link</th>
        <th class="col-sm-2" scope="row">Date</th>
        <th class="col-sm-5" scope="row">Description</th>
        <th class="col-sm-1" scope="row">Trade</th>
        </tr>
        </thead>
        <tbody>
        {{#each feedList}}
        <tr>
            <td> {{this.ticker}} </td>
            <td> <a href="{{this.attachmentLink}}"> {{this.ticker}}</a> </td>
            <td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
            <td> {{this.purposeText}} </br> {{this.summaryText}} </td>
            <td> {{this.ticker}} </td> 
        </tr>
           {{/each}}
        </tbody>
    </table>
</div>
</body>
    <script>
    $(document).ready(function() {
        $('#resultTable').DataTable({
        "order": [[ 2, "desc" ]],
        "columnDefs" : [{"targets":2, "type":"date"},
        { 
            targets: -1,
            searchable: false,
            orderable: false,
            render: function(data, type, full, meta){
               if(type === 'display'){
              data = '<kite-button href="#" data-kite="scret" data-exchange="NSE" data-tradingsymbol=' + data + 'data-quantity="1" data-order_type="MARKET">Buy '+ data + 'stock</kite-button>';      
               }

               return data;
            }
        ]
        });
    });</script>
</html>

带有第三方按钮的DataTables

0 个答案: