Set th width after table refresh 10 sec on th resize column?

Question

My problem is that i have page which would be refreshed after 10 sec and i have added resize column functionality on th.

But after page refresh after 10 sec. table th is get back to original position.

Main Question is that How I want to get width of particular th after resize th and apply that width to th.

What is jquery event to get width on th resize and also what is method apply width to that th only not others. so that user will see th width size after table refresh.

div {
  resize: horizontal;
  overflow: auto;
  ;
}

td {
  text-align: center;
}

<div id="banner-message">
  <table cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr>
        <th>
          <div>One</div>
        </th>
        <th>
          <div>Two</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ab</td>
        <td>cd</td>
      </tr>
    </tbody>
  </table>

</div>

How have you added "resize column functionality to `th`"? That will give you your answer. (Comment added before Jack nicely updated your question for you) — freedomn-m, Nov 15 '18 at 09:12
Yes, with the code *in* the question, it can be seen. You're not resizing the `th` at all, you're resizing a `div` within it. Catch that div's resize event, store the width, re-draw your table, re-apply the stored width. Link provided above on how to catch the div's resize event. — freedomn-m, Nov 15 '18 at 09:17
still not get answer.. Some one say use Mutation. I got error.. Anyone have perfect solution. — MumbaiKandivali, Nov 15 '18 at 10:24

Jonathan · Answer 1 · 2018-11-15T09:38:25.377

Your main issue would be not knowing the user set widths. When you enter a page either by refreshing or entering it initially, you are stuck with default values.

One way to save these values is it to add url parameters. Then get these values from the url to determine the width to set. Another way is to make use of localStorage or sessionStorage. The downside is that the set widths can not be shared by passing along a url. Update the values after you detect that they have changed.

score 0 · Answer 2 · answered Nov 15 '18 at 23:37

I got answer

Added div element in th

<th><div>#</div></th>

1.for resize column

$("#thead_DispatchTrip th").resizable({
        handles: "e",
        resize: function (event, ui) {
            $(ui.element).find('div').width(ui.size.width);
        }
    });

2. for getting width

tableWidth = [];
    $("#thead_DispatchTrip th").each(function () {
        tableWidth.push($(this).find('div').width());
    });

3. for setting width after 10 sec

$("#thead_DispatchTrip th").each(function (i,el) {
    $(this).find('div').width(tableWidth[i]);
});

Set th width after table refresh 10 sec on th resize column?

2 Answers2