Datatable Plugin Not Working For HTML Table in Blogspot

Onyebuchim

Thanks a lot allan. But having checked the code properly through jshint.com and JSBeautifier.org I tried breaking the features into separate blocks but got an error below:

DataTables warning: table id=BrokerTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

See code i used:

$(document)
.ready(function () {
$('#BrokerTable').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'colvis',
columns: ':not(:first-child)'
}]
} );

$('#BrokerTable').DataTable({
"columnDefs": [
{ "visible": false, "targets": 0 }
]
} );
});

I decided to try above since it seems not possible to place both features in the same block. However it did not work

Onyebuchim

I found a better way out.

$(document)
.ready(function () {
$('#BrokerTable').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'colvis',
columns: ':not(:first-child)'
}]
});
var table = $('#BrokerTable').DataTable();
// Hide a column
table.column( 0 ).visible( false );
table.column( 1 ).visible( false );
table.column( 2 ).visible( false );
table.column( 3 ).visible( false );

  } );

Now i need to find out how to auto resize or shrink the table size as columns are hidden. I appreciate your tips on this.

Thanks

Onyebuchim

Hi allan i discovered i need to get access to the css file and tweak it a bit to allow nowrap, width: 1% and others that will make it shrink when columns are hidden.

The problem is that i cannot access the css file because i used the CDN and download method to initialize the css on my website template.

Is there any other way out?

Onyebuchim

Hi allan i discovered i need to get access to the css file and tweak it a bit to allow nowrap, width: 1% and others that will make it shrink when columns are hidden.

The problem is that i cannot access the css file because i used the CDN and download method to initialize the css on my website template.

Is there any other way out?

Onyebuchim

I have solved the problem. I had to add an inline css to auto control sizing.

Onyebuchim

Please i need help in sorting my table without affecting the first row only. Other rows can be sorted but the first row should be left intact as the top most.

allan

There is no option for that built into DataTables. If you search the forum you'll find a number of threads on this topic. Ordering in the table is defined by the sorting that is applied to it - so if you want a row at the top, if needs to be put there by whatever sorting you apply to the table.

Allan

Onyebuchim

Thanks Allan. I found a resource here but i'm having difficulty applying it. Rather it takes away the other features and leaves the table plain.

Here is the code snippet from http://datatables.net/reference/option/columns.orderable

$('#example').dataTable( {
  "columns": [
    { "orderable": false },
    null,
    null,
    null,
    null
  ]
} );

Then see where i applied the code below

$(document)
    .ready(function () {
$('#BrokerTable').DataTable({


                dom: 'Bfrtip',
                buttons: [{
                    extend: 'colvis',
                    columns: ':not(:first-child)'
                }]

"columns": [
    { "orderable": false },
    null,
    null,
    null,
    null
  ]
});

var table = $('#BrokerTable').DataTable();
 // Hide a column
table.column( 1 ).visible( false );
table.column( 2 ).visible( false );
table.column( 3 ).visible( false );
table.column( 4 ).visible( false );
      } );

What am i doing wrong?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I don't see any code in the above that will effect the ordering of the table. It all relates to the column visibility.

What code have you used to try and make a single row appear at the top of the table. I'd suggest drawCallback if the row isn't part of the table (i.e. you can create and insert it), or use custom sorting methods if it is part of the table.

Allan

Onyebuchim

PS: Sorry i'm not able to use markdown to highlight code, so bear with me

From what i understood about the code is that it restricts sorting of the table somewhat thereby enabling the 1st Row remain intact. But i later found out that it was not the right fix to it.

So what i did was to put the static row on top of the header which made it exclusive of sorting . The good thing is that the visibility column feature still works on it. So when the table is sorted the static row remains unchanged.

See code snippet

<table border-collapse="collapse" cellspacing="0" class="display" id="BrokerTable" style="width: 100%px;" text-align="left"> 
<thead>

This is the row i want to be fixed even when the table is sorted. I placed it above the header.

<tr bgcolor="MistyRose"> 
    <td><b>Reserved Space</b></td> 
    <td>Reserved</td> 
    <td>Reserved</td> 
    <td>Reserved</td> 
    <td>Reserved</td>
    <td>Reserved</td> 
    <td>Reserved</td> 
    <td>Reserved</td> 
    <td><b>Reserved</b><br />
</tr>

This is the header declaration that is clickable for sorting

<tr> 
    <th>Broker</th>                      <!--Col 0-->
    <th>Broker Type</th>             <!--Col 1-->
    <th>Acct. Type</th>                <!--Col 2-->
    <th>Min Deposit</th>              <!--Col 3-->
    <th>Platform</th>                    <!--Col 4-->
    <th>Payment-Withdrawal</th> <!--Col 5-->
    <th>Leverage</th>                  <!--Col 6-->
    <th>Instruments</th>               <!--Col 7-->
    <th>Others</th>                       <!--Col 8-->

</tr>
</thead>

However i would have preferred that the static row be underneath the header and remain unsorted or fixed during sorting event. But this is what i've been able to come up with after trying several codes

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The code above will disallow end user sorting on the first column (due to the use of columns.orderable) - but DataTables does a default sort on the first column based on the order parameter (which you can change).

You could disable ordering completely and thus the order will always be as it was read in.

But perhaps it would be easier to simply put the row you want to be at the top of the table into the thead? You can have multiple rows in the thead no problem.

Allan

Onyebuchim

Ok thanks. I actually looked for something that could disable ordering completely but couldn't find any. Besides i was afraid it would defeat the purpose of sorting since i wanted an interactive table. For now I'll leave the particular row on top of the thead pending when i find an alternative solution.

I'm very grateful