javascript jquery datatable alpaca












2














I tried to look around the internet, but didn't come across with similar issue.



I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.



The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.



The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.



Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:



let initAlpaca = function () {
$('#table-alpaca').alpaca(alpacaJson);
};

let destroyAlpaca = function () {
$('#table-alpaca').alpaca("destroy");
};

let initDataTables = function () {
if (dataTable == null){
// datatable.destroy(true) destroys table element.
$("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
dataTable = $('#table-data').DataTable({
bPaginate: false,
searchable: true,
search: {
smart: false
},
columns: [
{name:"Fname", title:"Fname"},
{name:"Lname", title:"Lname"},
{name:"Age", title:"Age"},
{name:"Check", title:"Check"},
],
data: [
["John", "Smith", "44", "2000"],
["Mary", "Doe", "54", "2400"],
["Markus", "Example", "30", "3000"]
]
});
}
};

let destroyDataTables = function () {
if (dataTable != null){
dataTable.destroy(true);
dataTable = null;
}
};


Here is a JSFiddle that can demonstrate the issue: JSFiddle



Could this only be an issue under the alpaca("destroy") method?
How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?



Unlike in the JSFiddle, there is no need to show these tables at the same time.










share|improve this question





























    2














    I tried to look around the internet, but didn't come across with similar issue.



    I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.



    The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.



    The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.



    Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:



    let initAlpaca = function () {
    $('#table-alpaca').alpaca(alpacaJson);
    };

    let destroyAlpaca = function () {
    $('#table-alpaca').alpaca("destroy");
    };

    let initDataTables = function () {
    if (dataTable == null){
    // datatable.destroy(true) destroys table element.
    $("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
    dataTable = $('#table-data').DataTable({
    bPaginate: false,
    searchable: true,
    search: {
    smart: false
    },
    columns: [
    {name:"Fname", title:"Fname"},
    {name:"Lname", title:"Lname"},
    {name:"Age", title:"Age"},
    {name:"Check", title:"Check"},
    ],
    data: [
    ["John", "Smith", "44", "2000"],
    ["Mary", "Doe", "54", "2400"],
    ["Markus", "Example", "30", "3000"]
    ]
    });
    }
    };

    let destroyDataTables = function () {
    if (dataTable != null){
    dataTable.destroy(true);
    dataTable = null;
    }
    };


    Here is a JSFiddle that can demonstrate the issue: JSFiddle



    Could this only be an issue under the alpaca("destroy") method?
    How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?



    Unlike in the JSFiddle, there is no need to show these tables at the same time.










    share|improve this question



























      2












      2








      2







      I tried to look around the internet, but didn't come across with similar issue.



      I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.



      The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.



      The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.



      Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:



      let initAlpaca = function () {
      $('#table-alpaca').alpaca(alpacaJson);
      };

      let destroyAlpaca = function () {
      $('#table-alpaca').alpaca("destroy");
      };

      let initDataTables = function () {
      if (dataTable == null){
      // datatable.destroy(true) destroys table element.
      $("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
      dataTable = $('#table-data').DataTable({
      bPaginate: false,
      searchable: true,
      search: {
      smart: false
      },
      columns: [
      {name:"Fname", title:"Fname"},
      {name:"Lname", title:"Lname"},
      {name:"Age", title:"Age"},
      {name:"Check", title:"Check"},
      ],
      data: [
      ["John", "Smith", "44", "2000"],
      ["Mary", "Doe", "54", "2400"],
      ["Markus", "Example", "30", "3000"]
      ]
      });
      }
      };

      let destroyDataTables = function () {
      if (dataTable != null){
      dataTable.destroy(true);
      dataTable = null;
      }
      };


      Here is a JSFiddle that can demonstrate the issue: JSFiddle



      Could this only be an issue under the alpaca("destroy") method?
      How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?



      Unlike in the JSFiddle, there is no need to show these tables at the same time.










      share|improve this question















      I tried to look around the internet, but didn't come across with similar issue.



      I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.



      The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.



      The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.



      Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:



      let initAlpaca = function () {
      $('#table-alpaca').alpaca(alpacaJson);
      };

      let destroyAlpaca = function () {
      $('#table-alpaca').alpaca("destroy");
      };

      let initDataTables = function () {
      if (dataTable == null){
      // datatable.destroy(true) destroys table element.
      $("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
      dataTable = $('#table-data').DataTable({
      bPaginate: false,
      searchable: true,
      search: {
      smart: false
      },
      columns: [
      {name:"Fname", title:"Fname"},
      {name:"Lname", title:"Lname"},
      {name:"Age", title:"Age"},
      {name:"Check", title:"Check"},
      ],
      data: [
      ["John", "Smith", "44", "2000"],
      ["Mary", "Doe", "54", "2400"],
      ["Markus", "Example", "30", "3000"]
      ]
      });
      }
      };

      let destroyDataTables = function () {
      if (dataTable != null){
      dataTable.destroy(true);
      dataTable = null;
      }
      };


      Here is a JSFiddle that can demonstrate the issue: JSFiddle



      Could this only be an issue under the alpaca("destroy") method?
      How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?



      Unlike in the JSFiddle, there is no need to show these tables at the same time.







      javascript jquery datatables alpacajs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 23 at 10:05

























      asked Nov 23 at 9:54









      Arbitor

      113




      113





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444316%2fjavascript-jquery-datatable-alpaca%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444316%2fjavascript-jquery-datatable-alpaca%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Lallio

          Unable to find Lightning Node

          Futebolista