{"id":3177,"date":"2014-03-19T04:04:13","date_gmt":"2014-03-19T04:04:13","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/19\/problem-about-jquery-datatables-collection-of-common-programming-errors\/"},"modified":"2014-03-19T04:04:13","modified_gmt":"2014-03-19T04:04:13","slug":"problem-about-jquery-datatables-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/19\/problem-about-jquery-datatables-collection-of-common-programming-errors\/","title":{"rendered":"problem about jquery-datatables-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/85ec0c3873d56dadf8adf01b238cdadc?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nuser2570937<br \/>\njquery datatables jquery-datatables<br \/>\nI&#8217;m trying to use the reloadajax function however when I run it the table says processing and nothing happens. The button and everything works inside the table it just doesn&#8217;t reload the table and gets stuck. Any Ideas why?&lt;script type=&#8221;text\/javascript&#8221;&gt; $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) {\/\/ DataTables 1.10 compatibility &#8211; if 1.10 then versionCheck exists.\/\/ 1.10s API has ajax reloading built in, so we use those abilities\/<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njquery jquery-datatables<br \/>\nI put the dataTable function initialization inside an object but I don&#8217;t get the same result as when I initialize it outside the objectInitialization outside objectvar dataTable = $(&#8216;datatable&#8217;).dataTable();Initialization inside objectvar aObject = {dataTable : null,initFunction : function() {\/\/ this.dataTable contents is not the same when I initialize dataTable outside the objectthis.dataTable = $(&#8216;datatable&#8217;).dataTable();} }Why is this? EDIT: Also, it doesn&#8217;t seem to successfully initialise th<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/05eb1a75467975d114393531e800d20c?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nArthur<br \/>\njquery jquery-datatables<br \/>\nI am using colvis and multi search together, but it has some issue though..Cases: 1. If I uncheck &#8216;Rendering Engine&#8217;, and use multi-search for Engine Version (e.g. with data data 6 or 7), it wont give any data. 2. for multi-serach for CSS grade, it wont search at all I&#8217;ve created a jsfiddle here http:\/\/jsfiddle.net\/cyVjh\/script used\/\/Search $(&#8220;tfoot input&#8221;).keyup(function () {\/* Filter on the column (the index) of this element *\/oTable.fnFilter(this.value, $(&#8220;tfoot input&#8221;).index(this)); })<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njavascript php jquery jquery-datatables<br \/>\nProblem : using dataTables javascript library to display data perfectly fine.Data is retrieved via PHP\/mysql and then the table is drawn and the code cycles through the tables as such :JAVA code for dataTables -&lt;script&gt; $(document).ready(function() {$(&#8220;#PayMasterResults&#8221;).dataTable( {&#8220;sPaginationType&#8221;: &#8220;full_numbers&#8221;,&#8221;bPaginate&#8221;: false,&#8221;bJQueryUI&#8221; : true,&#8221;sScrollY&#8221;: &#8220;215&#8221;,&#8221;bLengthChange&#8221;: true,&#8221;bFilter&#8221;: true,&#8221;bSort&#8221;: false,&#8221;bInfo&#8221;: true,&#8221;bAutoWidth&#8221;: false,&#8221;sDom&#8221;: \\'&lt;&#8220;H&#8221;lTfr&gt;t&lt;&#8220;F<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njquery jquery-datatables<br \/>\nIn Datatables while viewing in the browser we show n columns. When a user clicks generate excel (implemented using TableTools), I want to hide some unneeded columns. How to hide columns at runtime?<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\nruby-on-rails ruby ruby-on-rails-3.1 jquery-datatables<br \/>\nDoes anybody have experience with datatables and Rails 3.1!? I tried the simple_datatables 0.2.1 gem from :https:\/\/github.com\/gryphon\/simple_datatableswith kaminari and meta_search 1.1.0 but could not make it working. The table show up without images\/css probably due to not properly loaded css styles. Searching in the tables crashes also&#8230;. due to some weird search flags it passes to the backend. Example : I have columns &#8216;name&#8217; and &#8216;size&#8217; and it passes : &#8216;search[name_or_sizefalse]&#8217; The backend<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/55b3816622d935e50098bb44c17663bc?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nAlexander Farber<br \/>\ntable header jquery-datatables<br \/>\nI&#8217;m trying to create a table where more details can be seen when the plus-image is clicked &#8211; similar to the DataTables hidden row details exampleUnfortunately there is a warning being printed as JavaScript alert and also the table header is misplaced &#8211; as if there would be too many or not enough table cells in it:I have prepared a simple test case, which will work instantly, when you save it to a file and open it in a browser:&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;link type=&#8221;text\/cs<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njquery asp.net-mvc jquery-datatables<br \/>\nI have an index.cshtml file with a simple table. I downloaded the css file and the min js file for the dataTable plugin. I put the following code in BundleConfig.cs:bundles.Add(new ScriptBundle(&#8220;~\/bundles\/table&#8221;).Include(&#8220;~\/Scripts\/jquery.dataTables.min.js&#8221;));bundles.Add(new StyleBundle(&#8220;~\/Content\/themes\/base\/css&#8221;).Include(&#8220;~\/Content\/themes\/base\/jquery.ui.core.css&#8221;,&#8221;~\/Content\/themes\/base\/jquery.ui.resizable.css&#8221;,&#8221;~\/Content\/themes\/base\/jquery.ui.selectable.css&#8221;,&#8221;~\/Content\/themes\/base\/jquery.ui.<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njavascript jquery-datatables<br \/>\nBased on the API docs at DataTables site, I created the following javascript function to show only one specific table at a time:function ShowColumn(columnNum) {var table = $(&#8216;#MemberStatisticGrid&#8217;).dataTable();$(&#8216;#SelectedMetricList option&#8217;).each(function (index) {table.fnSettings().fnSetColumnVis(index, false);});table.fnSettings().fnSetColumnVis(columnNum, true); }However, this fails with the error Uncaught TypeError: Object #&lt;1&gt; has no method &#8216;fnSetColumnVis&#8217;I don&#8217;t get why I am getting<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/703496dd6f9097efaa51f2b8c83b47ac?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\naquajach<br \/>\nruby-on-rails twitter-bootstrap turbolinks jquery-datatables<br \/>\nI have one page with a table enabled with jQuery datatables and also bootstrap (they are fine with each other at the moment). While things get messed up when adding turbolinks to my Rails 4 application. Here&#8217;s my application.js file:\/\/= require jquery \/\/= require jquery_ujs \/\/= require twitter\/bootstrap \/\/= require dataTables\/jquery.dataTables \/\/= require dataTables\/jquery.dataTables.bootstrap \/\/= require layouts \/\/= require turbolinks \/\/= require_selfIn the layouts.js file, I just simply put a<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/20f9049a588f0bd55b551c79c36e7b8f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nbrazorf<br \/>\njavascript jquery datatables jquery-datatables<br \/>\n$(document).ready(function() {var oTable = $(&#8216;#example&#8217;).dataTable({&#8220;aoColumns&#8221;: [{&#8220;mData&#8221;: &#8220;name&#8221;}]});\/\/ Sample modelvar Person = function() {this.name = null;};p = new Person(); \/\/ Add first row.oTable.fnAddData(p); \/\/ Try first update.oTable.fnUpdate( {name: &#8216;hardcoded&#8217;}, 0 ); \/\/ &lt;&#8212; Works\/\/ Change the name property.p.name = &#8216;updated&#8217;;oTable.fnUpdate( p, 0 ); \/\/ &lt;&#8212; Doesn&#8217;t work} );I can&#8217;t get this to work, when i run the oTable.fnUpdate( p, 0 ); i am gettingUncaught TypeError: Cannot<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/07123541fba3343f9ddb5876595b99a7?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nAlex<br \/>\njavascript jquery jquery-datatables redraw<br \/>\nI have a datatable with few rows, I want to add new row in table :var oTable = $(&#8216;#StudentsTable&#8217;).dataTable();Table2.fnStandingRedraw();when I init the dataTable I add :&#8221;bProcessing&#8221;: true,&#8221;bServerSide&#8221;: true,&#8221;bDestroy&#8221;: true,&#8221;fnFilter&#8221;: true,&#8217;bLengthChange&#8217;: true,&#8217;bPaginate&#8217;: true,&#8217;bStandingRedraw&#8217;: true,after ajax submit I want to redrow the table:submitHandler: function(form) {var $modal = $(&#8216;#ajax-modal&#8217;);$modal.modal(&#8216;loading&#8217;);$(form).ajaxSubmit({dataType: &#8216;json&#8217;,success: function(result)<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njson jsonp jquery-datatables<br \/>\nI try to use the DataTables component with data provided by a REST API. Chrome reports the following error Uncaught SyntaxError: Unexpected token : on line 2 (see JSON below) when I use server-side data but it works if I use a text file. The setup is:$(&#8216;#table_id&#8217;).dataTable({&#8220;bProcessing&#8221;: true,&#8221;bServerSide&#8221;: true,&#8221;sAjaxSource&#8221;: &#8220;http:\/\/mylocalhost:8888\/_ah\/api\/realestate\/v1\/properties\/demo&#8221;,\/\/&#8221;sAjaxSource&#8221;: &#8220;data.txt&#8221;,&#8221;sAjaxDataProp&#8221;: &#8220;items&#8221;,&#8221;aoColumns&#8221;: [{&#8220;mData&#8221;: &#8220;id&#8221;}],&#8221;fnServerData&#8221;: func<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njquery jquery-datatables<br \/>\nI&#8217;m following the examples to use FixedColumns. var oTable4 = $(&#8216;#example&#8217;).dataTable( {&#8220;sScrollY&#8221;: &#8220;300px&#8221;,&#8221;sScrollX&#8221;: &#8220;100%&#8221;,&#8221;sScrollXInner&#8221;: &#8220;150%&#8221;,&#8221;bScrollCollapse&#8221;: true,&#8221;bPaginate&#8221;: false} );new FixedColumns( oTable4 );I get the following error which means I&#8217;ve made some error initializing it&#8230;Uncaught ReferenceError: FixedColumns is not defined Is FixedColumn a seperate plugin? I&#8217;m using jQuery 1.9.1.<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\njquery jquery-datatables<br \/>\nBelow is my code:(function worker() { oTable = $(&#8216;#example&#8217;).dataTable({&#8220;iDisplayLength&#8221; : 25, &#8220;sAjaxSource&#8221;: &#8220;\/getservicevers\/?value=&#8221; + QueryString.stage ,&#8221;bDestroy&#8221; : true , &#8220;fnServerData&#8221; :function ( sSource, aoData, fnCallback ) {$.ajax( {&#8220;dataType&#8221;: &#8216;json&#8217;,&#8221;type&#8221;: &#8220;GET&#8221;,&#8221;url&#8221;: sSource,&#8221;async&#8221;:false,&#8221;success&#8221;: function (json){fnCallback(json);},complete: function() {setTimeout(worker, 5000);}})}});})();In the UI side I do see AJAX request being made periodically but issue is that the DataT<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/148e08be842f200869db3459cd5e9189?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nuser1005310<br \/>\njquery jquery-datatables<br \/>\nI have a button on each row of the datatable editable, The below mentioned code is present onclick event of the button$(&#8216;#Undo&#8217;).live(&#8216;click&#8217;, function () {debugger;var nTr = &#8221;;nTr = $(this).closest(&#8216;tr&#8217;)[0];oTableAuditLines.fnUpdate(&#8216;Double-Click to edit&#8217;,nTr,16,false); oTableAuditLines.fnUpdate(&#8216;Double-Click to edit&#8217;,nTr,17,false); oTableAuditLines.fnUpdate(&#8216;Double-Click to edit&#8217;,nTr,18,false); oTableAuditLines.fnUpdate(&#8216;Double-Click to edit&#8217;,nTr,19,false); oTableAuditLines.fnUpdate(<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b1a3c7eb11abd99439c5b1b4b50b37f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmadth3<br \/>\ndatatables jquery-datatables<br \/>\nI have installed TablePress Extension on wordress: Individual Column Filtering (with drop-downs), it&#8217;s working very good. Is it possible to move drop-down filter option from footer side to header side?Datatable exampleAll table will be visible unless I&#8217;ll put a filter (Drop down) on the table, is it possible that no table will be visible and when I&#8217;ll select filter then only it will show the table according to selection?(function($) { \/* * Function: fnGetColumnData * Purpose: Return an array o<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/ecc38208de17156881177aefb58bbe96?s=32&amp;d=identicon&amp;r=PG&amp;f=1\" \/><br \/>\nuser2680900<br \/>\njquery-datatables<br \/>\nI am new to using datatables.Requirement is : To get the cell- row no &amp; col no when I hover over the table (4 column table). When i hover the mouse over the 2nd column of each row I have to show a popup describing the values of the 2nd column (which I have kept hidden in the 4th column) I searched around and I got info on getting the column no, but not the row no and col no at the same time.The code i used is as below:jQuery(document).ready(function() {var oTable = $(&#8216;#example&#8217;).dataTable( {<\/li>\n<\/ul>\n<p>Web site is in building<\/p>\n","protected":false},"excerpt":{"rendered":"<p>user2570937 jquery datatables jquery-datatables I&#8217;m trying to use the reloadajax function however when I run it the table says processing and nothing happens. The button and everything works inside the table it just doesn&#8217;t reload the table and gets stuck. Any Ideas why?&lt;script type=&#8221;text\/javascript&#8221;&gt; $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) {\/\/ DataTables [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3177","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3177"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3177\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}