Different number of colums

shamil

Is it possible to output different number of columns depending on resolution. For example 1 column at 375px, 2 columns at 768, and 4 at 1920? Do I need to create four tables with different number of columns, or can I somehow recalculate?
Link to test case: http://ashamil.net/

kthorngren

Sounds like you will want to use the Responsive Extension. You can specify the column breakpoints using Class Logic.

Kevin

shamil

Thanks for the quick response! I took advantage of your answer. But in this case, the columns become hidden along with the data. What needs to be done for the table to be dynamically recalculated?

colin

Yep, /Responsive removes some columns to make the important ones fit the display area.

What needs to be done for the table to be dynamically recalculated?

Please can you explain when you mean by that,

Colin

shamil

When the breakpoint is hit, the table looks like

        <tr role="row" class="odd">
             <td>first value</td>
             <td>second value</td>
             <td style="display: none;">third value</td>
             <td style="display: none;">fourth value</td>
        </tr>
        <tr role="row" class="even">
              <td>fifth value</td>
              <td>sixth value</td>
              <td style="display: none;">seventh value</td>
              <td style="display: none;">eighth value</td>
         </tr>

Is it possible for something like:

        <tr role="row" class="odd">
             <td>first value</td>
             <td>second value</td>
             <td style="display: none;"></td>
             <td style="display: none;"></td>
        </tr>
        <tr role="row" class="even">
              <td>third value</td>
              <td>fourth value</td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
         </tr>

kthorngren

Datatables doesn't have anything builtin to restructure the columns like this. It would take custom coding on your part to restructure the table. At a high level you will need to use destroy() and reinitialize the Datatable with the new column structure. Restructure the data to fit the new column structure and then apply the resturctured data to the table.

Maybe a combination of the Responsive ability to immediately show the row details, see this example. And a custom child row renderer, as shown in this example, will display the data the way you want.

Kevin

shamil

And in this regard, another question Is it possible to customize the filling of the table with a simple one-dimensional array? Instead of passing:

 
"data":[["first value","second value","third value","fourth value"],["fifth value","sixth value","seventh value","eighth value"],..]

send:

 
"data":["first value","second value","third value","fourth value","fifth value","sixth value","seventh value","eighth value",..]

Or is it impossible and you must always transfer data with a strictly specified size?

colin

No, it must be two-dimensional. With a one dimensional array, how would you know where the next record begins? It needs two dimension so each record is held within an array.

Colin