Wordpress - Tablepress custom function - Reinitilization error

dkj

Hy Guys,

I am using the Wordpress Tablepress plugin. In addition, I also want to style the data using fnRowCallback . There is a solution provided by SaschaM78 (stackoverflow userid) in the following thread

http://stackoverflow.com/questions/15740005/giving-custom-classes-to-each-td-for-styling-datatables-jquery

The problem is, I am newbie in JS. Still I tried to hack my way through the Tablepress core plugin files (tablepress/controllers/controller-frontend.php) by including the stackoverflow code in between script tags as shown below:

ORIGINAL

    <script type="text/javascript">
        jQuery(document).ready(function($){
        {$datatables_strings}{$commands}
    });
    </script>

MODIFIED

<script type="text/javascript">
jQuery(document).ready(function($){

$('#tablepress-1').dataTable({
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      console.log(aData[1]);
      if ( aData[0] == 'Ajay' )
      {
        $('td:eq(0)', nRow).html( '<b>Ajay</b>' );
      }
    }
  });

 {$datatables_strings}{$commands}
 
});
</script>

But, that where my adventurism ended. Browser immediately spitted out the error: "DataTables warning: table id=tablepress-1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

Guys, could you help resolve the error and correctly format the above code so that both, my function and Tablepress code - {$datatables_strings}{$commands} gets correctly interpreted by browser.

many thanks for help
dkj

alexwayhill

Hi dkj,

I am the mentioned user "SaschaM78" on SO and found your question when searching for a solution to your problem. Let's see how we can fix the problems you are currently running into:

1.) Your above mentioned error "Cannot reinitialise DataTable" is shown because the plugin itself creates the required Javascript code that is required to build the DataTable and you additionally try to create another instance of the same DataTable. In the moment you call $('#tablepress-1').dataTable(... the table with ID tablepress-1 is converted to a DataTable, the second {$datatables_strings}{$commands} will then be translated into JS code similar to your code but the code then cannot reinitialize the already initialised tablepress-1 table.

2.) I have no Wordpress installation available but had a look at the plugin's source code. There is a parameter available called "rowCallback" that should contain the code you currently contain in your fnRowCallback code (Line 6-10). Remove your JS code you inserted manually and copy the mentioned lines into the module's parameter section using the Wordpress administration menu. Have Developer Tools open and see what happens when you reload the page containing the DataTable.

Good luck and read you later!

dkj

I really appreciate your help. Actually Tablepress developer provided a very simple soln i.e. to remove any line breaks from your code including comments so that all code is on a single line and then insert formatted code into the command input box (available in plugins interface). That did it for me.

Since you are quite proficient in JS and I am no JS developer so would you be kind enough to look at my another SO query (related to Tablepress, but very general in nature)

http://stackoverflow.com/questions/28928079/jquery-simulate-user-click-on-previous-button-link

I apologize if you feel that I am asking too much but it's just this thing I am stuck with and will really help conclude my project and I believe it shouldn't be too much of a task for you.

As a beginner, It's hard getting things done in JS things. Hope u help.

thanks
dkj

alexwayhill

Hey dkj,

you may use the DataTables API to handle time-based pagination, I added example code to your new SO question that should give you a basic idea how to handle this.

Good luck!