Changin HTML View of TablePress Result

  • Resolved creativemind1

    (@creativemind1)


    9 years, 11 months ago

    Hello,

    HTML Front view tablepress result of mine.

    <table id="tablepress-10" class="tablepress tablepress-id-10 dataTable no-footer" role="grid">
<caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;">

</caption>
<thead>
<tr class="row-1" role="row">
<td class="column-1 sorting" tabindex="0" aria-controls="tablepress-10" rowspan="1" colspan="1" aria-label="Month: activate to sort column ascending" style="width: 78px;">Month</th>
<td class="column-1">Decemeber</td>
</tr>
</thead>
</table>

    I want to change like below

    <table id="tablepress-10" class="tablepress tablepress-id-10 dataTable no-footer" role="grid">
<caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;">
</caption>
<thead>
<tr class="row-1" role="row">
<td class="column-1 sorting" tabindex="0" aria-controls="tablepress-10" rowspan="1" colspan="1" aria-label="Month: activate to sort column ascending" style="width: 78px;">Month</td>
<td class="column-1">Dec</td>
</tr>
</thead>
</table>

    I know PHP, if you can atleast show me the page where I can find the code it will be sufficient for me to edit it.

    For this particular page, I use tablepress-datatables-column-filter-widget plugin.

    Thanks

    https://www.ads-software.com/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Most of the HTML there is automatically generated by the DataTables JS library, and that can not be changed that easily.

    Can you therefore please describe what exact changes you want to make? I can then maybe suggest the best solution. From what I can see, the only difference is that “December” is shortened to “Dec”?

    Regards,
    Tobias

    Thread Starter creativemind1

    (@creativemind1)

    No, it was by mistake.

    1) The actual thing which I need is to make the fixed header row in the coloumn way. Find below link for the image. The black row is the fixed header row, I want that to display in coloumn and and so the yellow one.

    https://oi60.tinypic.com/302cr55.jpg

    2) In the same image, you can notice the red line pointing towards “14”. Well, I want to know, If I select the date from the dropdown why it displays beneath the dropdown? Why not it displays in the dropdown?

    3) Please look at this link https://oi57.tinypic.com/jrv7sw.jpg I’ve given numbers in 31 (i.e. all dates for the month). It is not showing in order. I’ve uploaded the table with CSV and at that they were indeed in order. So if someone selects from the date dropdown, it simply removed from the dropdown and display beneath the dropdown. If you hover over it, it shows “line-through css” and if you click, it goes to it’s default place.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for those explanations!

    1) So, you want to flip the table to the side, basically? For that, I suggest to take a look at the Responsive Tables Extension from https://tablepress.org/extensions/responsive-tables/ which can do that.

    2) The ColumnFilterWidgets JS code shows that 14 below the dropdown, because you can select multiple values from the dropdown. Those are then all shown below the dropdown. With the “line-through”, it is indicated that the you click on it to remove that term from the filtering.

    3) This also is a limitation of the ColumnFilterWidgets JavaScript code (which I didn’t develop). It basically sorts the data again, but doesn’t sort it like numbers, but as strings.

    Regards,
    Tobias

    Thread Starter creativemind1

    (@creativemind1)

    2) Can’t it develop like this https://codepen.io/ericrasch/pen/zjDBx so that when someone selects the dropdown option, it shows under dropdown itself but below the dropdown.

    3) Also, I’m noticing that if the person will not click on the selected option (meaning deleting the selected option) then he cannot choose other options from the dropdown. Can this be sorted as well like, the table values must generate without needing to delete the selected option.

    Thanks

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for this, you would have to change the JS code of the ColumnFilterWidgets script from https://github.com/cyberhobo/ColumnFilterWidgets .
    Unfortunately, as I’m not the developer of that (I only packaged it to make it available as a TablePress Extension), I can’t help with this ??

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changin HTML View of TablePress Result’ is closed to new replies.