将序列化列表添加到jquery数据表

时间:2016-02-02 22:52:25

标签: c# jquery ajax serialization datatables

我正在尝试将我的序列化List添加到.txt文件中,然后使用Ajax调用将其添加到我的jQuery Datatable,但是我的Ajax的第一行出错了。有人能告诉我我做错了吗?

这是我的path.txt(序列化列表):

["ENS FRUTAS","REST","CENAS","$26.50",0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,"$26.50"]

这是我的DataTable填充JavaScript:

$(document).ready(function () {
  var table = $('#pftable_hdr').DataTable({
    "ajax": {
      "url": "/path.txt", 
      "dataSrc": "" 
    },
    "columns": [
      { "data": "Descripcion" },
      { "data": "Pdv" },
      { "data": "Rid" },
      { "data": "PV" },
      { "data": "1" },
      { "data": "2" },
      { "data": "3" },
      { "data": "4" },
      { "data": "5" },
      { "data": "6" },
      { "data": "7" },
      { "data": "8" },
      { "data": "9" },
      { "data": "10" },
      { "data": "11" },
      { "data": "12" },
      { "data": "13" },
      { "data": "14" },
      { "data": "15" },
      { "data": "16" },
      { "data": "17" },
      { "data": "18" },
      { "data": "19" },
      { "data": "20" },
      { "data": "21" },
      { "data": "22" },
      { "data": "23" },
      { "data": "24" },
      { "data": "25" },
      { "data": "26" },
      { "data": "27" },
      { "data": "28" },
      { "data": "29" },
      { "data": "30" },
      { "data": "31" },
      { "data": "Total" },
      { "data": "Cantidad" }
    ],
    scrollY: "500px", 
    scrollX: true, 
    scrollCollapse: true, 
    fixedColumns: { 
      leftColumns: 3
    }
  });
});

这是我的HTML表格代码:

<table class="table table-hover no-more-tables table-iconmebanquet-detail" id="pftable_hdr">
  <thead>
    <tr>
      <th style="">Descripcion</th>
      <th style="">Pdv</th>
      <th style="">Rid</th>
      <th style="">PV</th>
      <th style="">1</th>
      <th style="">2</th>
      <th style="">3</th>
      <th style="">4</th>
      <th style="">5</th>
      <th style="">6</th>
      <th style="">7</th>
      <th style="">8</th>
      <th style="">9</th>
      <th style="">10</th>
      <th style="">11</th>
      <th style="">12</th>
      <th style="">13</th>
      <th style="">14</th>
      <th style="">15</th>
      <th style="">16</th>
      <th style="">17</th>
      <th style="">18</th>
      <th style="">19</th>
      <th style="">20</th>
      <th style="">21</th>
      <th style="">22</th>
      <th style="">23</th>
      <th style="">24</th>
      <th style="">25</th>
      <th style="">26</th>
      <th style="">27</th>
      <th style="">28</th>
      <th style="">29</th>
      <th style="">30</th>
      <th style="">31</th>
      <th style="">Total</th>
      <th style="">Venta</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th style="">Descripcion</th>
      <th style="">Pdv</th>
      <th style="">Rid</th>
      <th style="">PV</th>
      <th style="">1</th>
      <th style="">2</th>
      <th style="">3</th>
      <th style="">4</th>
      <th style="">5</th>
      <th style="">6</th>
      <th style="">7</th>
      <th style="">8</th>
      <th style="">9</th>
      <th style="">10</th>
      <th style="">11</th>
      <th style="">12</th>
      <th style="">13</th>
      <th style="">14</th>
      <th style="">15</th>
      <th style="">16</th>
      <th style="">17</th>
      <th style="">18</th>
      <th style="">19</th>
      <th style="">20</th>
      <th style="">21</th>
      <th style="">22</th>
      <th style="">23</th>
      <th style="">24</th>
      <th style="">25</th>
      <th style="">26</th>
      <th style="">27</th>
      <th style="">28</th>
      <th style="">29</th>
      <th style="">30</th>
      <th style="">31</th>
      <th style="">Total</th>
      <th style="">Venta</th>
    </tr>
  </tfoot>
</table>

如何进行Ajax调用以使用.txt文件中的数据填充DataTable?

1 个答案:

答案 0 :(得分:1)

您的数据必须是数组数组,请参阅下文:

[["ENS FRUTAS","REST","CENAS","$26.50",0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,"$26.50"]]

无需columns.data初始化选项,请参阅以下更新的JavaScript代码:

$(document).ready(function () {
    var table = $('#pftable_hdr').DataTable({
        ajax: {
            url: "/path.txt",
            dataSrc: ""
        },
        scrollY: "500px",
        scrollX: true,
        scrollCollapse: true,
        fixedColumns: {
            leftColumns: 3
        }
    });
});

请参阅this jsFiddle以获取代码和演示。