How to remove responsive property of a table? How to send items from different pages to the front?

How to remove responsive property of a table? How to send items from different pages to the front?

MM126MM126 Posts: 4Questions: 2Answers: 0

Hello,

I integrated in my web page an "Alternative pagination" type table [https://datatables.net/examples/basic_init/alt_pagination.html].
and I have two questions please:
Q1 ) When I change the pagination, or press the sort button next to the column title, the column and table widths change. I wish it was fixed. (I tried in different way like with columnDefs: [
{ targets: [0, 1, 2,], width: '100px' }
],
and CSS settings and it doesn't work. I really want to override the responsive property of the array).

Q2) I created a column of checkbox buttons to have one each line (I want to link later to specific actions for checked items). I find it very difficult to push the checked items (with a button I created called 'Rearrange') which come from the different pages, in front of the table (I change their positions so that they take the first positions so that they are more visible). Can anyone help me with this please?

Answers

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin

    When I change the pagination, or press the sort button next to the column title, the column and table widths change.

    They don't appear to in the page you linked to. Can you link to a page showing the issue please.

    I find it very difficult to push the checked items (with a button I created called 'Rearrange') which come from the different pages, in front of the table

    I don't know what you mean I'm afraid. "In front of the table" - like copying the data to show before the table, or sorting in the table or something else?

    Allan

  • MM126MM126 Posts: 4Questions: 2Answers: 0
    edited July 2023

    Q1) The link is to show the type of table I used, but in my case the data in the same column has very different lengths, so the widths change when I change the page or sort. I would like to know how to cancel this width adaptation. (the application is local I have no link).

    Q2) I mean I want to send them to the first positions of the table, to the first page, for example 2 items from the 3rd page and 2 items from the 5th page, after clicking on a button, will go to the first page within 4 first positions. thxs

  • kthorngrenkthorngren Posts: 21,459Questions: 26Answers: 4,975

    Q1) Possibly you have the nowrap class on your table tag? IF so maybe remove it to allow the column data to wrap. See the styling docs for more info.

    Maybe use something like the ellipsis plugin.

    The best thing to do is to build a simple test case that shows an example of your data so we can see exactly what the problem is.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Q2) Are you asking about searching the table using checkboxes? If yes then see this example:
    https://live.datatables.net/vipifute/1/edit

    Maybe you can build a test case showing what you currently have with details of what you are wanting to do.

    Kevin

  • MM126MM126 Posts: 4Questions: 2Answers: 0

    Thank you very much for your reply.

    Here I have almost copied my code (same css and same js. The only difference is that in my application I am looking for my data from the database via a foreach loop). Strangely here the widths are fixed. I use same browser and struts1.3 environment and .jsp page.

    https://live.datatables.net/picogaha/1/edit

    For the checkboxes, I would like that when I press the 'Sort selected' button, the items selected from several pages will be rearranged in the first positions of the table (in the first page, line 1, 2, 3, 4). I tried many things to no avail.
    Thanks

  • kthorngrenkthorngren Posts: 21,459Questions: 26Answers: 4,975

    You could get an example of your data and load the data similar to this example. You may be interested in Allan's comments in this thread about column widths. We will need to see the issue to help debug.

    The easiest way to sort checkboxes is to have a data value, 1 or 0 for example, to represent the state of the checkbox for sorting. See this example, ignore the Editor part of the code. Look at the Ajax Load tab to see the original data. You can click the column to see that it sorts based on the 1 or 0 value. Is this an option for your solution?

    You can use the order() API in the event handler for your button to sort the column.

    Kevin

Sign In or Register to comment.