jQuery数据表设置列设计和成功回调值 [英] jQuery datatable setting column design and value in success callback

问题描述

我为我的数据表编写了一个如下代码，这些代码填充表中的内容，如下所示：

  if （datatable！= null）
 datatable.destroy（）; 
 
 datatable = $（'＃tableProducts'）。DataTable（{
pageLength：50，
bLengthChange：false，
processing：true ，
serverSide：true，
filter：true，
orderMulti：false，
bSort：false，
ajax：{ 
url：/ Bulk / LoadData /，
type：POST，
data：{
username：$（。sellerInput ）.val（），
drange：$（。select2）。val（）
}，
成功：函数（数据）{
} 
 $ b数据：ImageURL，
name：
 Title，
render：function（data，type，row）{
 return'< td>< img src ='+ data +'>< / td>'; 
}，
autoWidth：true 
}，
 {
data：Sales，
name：QuantitySold， 
render：function（data，type，row）{
 
 return'< td>'+ data +'< / td>'
}，
 $ b $ data $ currentPrice 
 name name：CurrenctPrice 
render：function（data，type，row）{ 
 
 return'< td> < b> $'+ data +'< / b>< / td>'
}，
} 
] 
}）; 
  

如果我没有指定成功回调，这个工作很好。如果我指定成功回调像这样（也在上面的代码中显示）：

 ajax：{
 url：/ Bulk / LoadData /，
type：POST，
data：{
username：$（。sellerInput）。val ），
drange：$（。select2）。val（）
}，
成功：函数（数据）{
 //一些自定义代码和+用数据库填充数据表... 
} 
}，
  

这里的问题是，如果我指定成功回调，然后更新我的HTML页面的其他部分，那么数据表不会加载DB中的数据。

我的问题是，如果我重写数据表的成功回调函数，以便更新我的HTML页面的更多部分，只显示数据表本身，我该如何手动指定数据表的数据源？

有人能帮我吗？

dataSrc 而不是 success 来获取响应数据

试试这个：

  ajax：{
url：/ Bulk / LoadData /，
type：POST，
data：function（d）{
 d .username：$（。sellerInput）.val（），
 d.drange：$（。select2）.val（）
}，
dataSrc：function数据）{
 //一些自定义代码在这里，并用我的数据库中的数据填充数据表... 
 console.log（data）; 
返回数据; 
} 
}，
  

注意：另外你试图发送额外的参数为 username 和 drange ，所以在DataTable中我们应该使用 data：function（d）{ as function to send extra param

examples / server_side / custom_vars.htmlrel =nofollow noreferrer> 官方文档

I have written a following code for my datatables which fills up the table with contents from my DB like this:

 if (datatable != null)
            datatable.destroy();

        datatable = $('#tableProducts').DataTable({
            "pageLength": 50,
            "bLengthChange": false,
            "processing": true,
            "serverSide": true,
            "filter": true,
            "orderMulti": false,
            "bSort": false,
            "ajax": {
                "url": "/Bulk/LoadData/",
                "type": "POST",
                "data": {
                    "username": $(".sellerInput").val(),
                    "drange": $(".select2").val()
                },
                success: function (data) {
                }
            },
            "columns": [
                      {
                          "targets": -1,
                          "data": "ImageURL",
                          "name": "Title",
                          "render": function (data, type, row) {
                              return '<td><img src=' + data + '></td>';
                          },
                          "autoWidth": true
                      },
                {
                    "data": "Sales",
                    "name": "QuantitySold",
                    "render": function (data, type, row) {

                        return '<td>' + data + '</td>'
                    },
                },
                 {
                     "data": "CurrentPrice",
                     "name": "CurrenctPrice",
                     "render": function (data, type, row) {

                         return '<td> <b>$ ' + data + '</b></td>'
                     },
                 }
            ]
        });

And this works just fine if I don't specify the success callback. If I specify the success callback like this ( also shown in code above):

"ajax": {
       "url": "/Bulk/LoadData/",
       "type": "POST",
       "data": {
                "username": $(".sellerInput").val(),
                "drange": $(".select2").val()
               },
                success: function (data) {
               // some custom code here and + filling up datatable with data from my DB...
               }
   },

The problem here is if I specify the success callback and then update other parts of my HTML page, then the datatable doesn't loads up the data in DB..

My question is, how can I manually specify the data source for datatable if I override the datatable's success callback function in order to update more parts of my HTML page insteade of just the datatable itself?

Can someone help me out ?

解决方案

You can use dataSrc instead of success to get the response data

Try this:

"ajax": {
       "url": "/Bulk/LoadData/",
       "type": "POST",
       "data": function (d){
                d.username: $(".sellerInput").val(),
                d.drange: $(".select2").val()
       },
       "dataSrc": function (data) {
               // some custom code here and + filling up datatable with data from my DB...
            console.log(data);
            return data;
       }
   },

Note: Also you are trying to send extra param's as username and drange, so in DataTable we should use "data":function(d){ as function to send extra param

Official Documentation

这篇关于jQuery数据表设置列设计和成功回调值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！