Add Serialized List to jquery Datatables

Question

I'm trying to add my serialized List in a .txt file and then add it to my jQuery Datatable using an Ajax call, however I got an error in the first line of my Ajax. Can someone tell me what I'm doing wrong?

This is my path.txt (serialized List):

["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"]

This is my DataTable-filling 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
    }
  });
});

And this is my HTML table code:

<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>

How can I make my Ajax call to fill my DataTable with the data in my .txt file?

Gyrocode.com · Accepted Answer · 2016-02-03 00:04:19Z

1

Your data has to be array of arrays, see below:

[["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"]]

There is no need for columns.data initialization options, see updated JavaScript code below:

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

See this jsFiddle for code and demonstration.

answered Feb 3, 2016 at 0:04

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arturo Martinez Over a year ago

how do i convert my serialized list to an array of arrays? @Gyrocode.com

Gyrocode.com Over a year ago

@ArturoMartinez, it just needs to be wrapped in [ and ]. If there would be always one item and you cannot change format of that file, there are other ways around that.

Arturo Martinez Over a year ago

so is there a way i cant encapsule each row of my list in []? y have more than one row in my example i just putted one but i need to encapsule each row on [] or should i convert the list to datagrid?

Ala' Alnajjar Over a year ago

You can serialize your list as json using JavaScriptSerializer or any 3rd party frameworks like Json.Net

Collectives™ on Stack Overflow

Add Serialized List to jquery Datatables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related