data-value and data-text in from html example

[marceloverdijk]

Description

I’m trying something out where I have a Bootstrap Table from html.

It’s basically an existing app where we want to spice some tables with search and sort functionality.

As the tables are based on html some of the column fields contain html like to link to a detail page , or even other tags for cosmetic purpose like showing Bootstrap Badges.

Now when searching it also matches results from the html code - which makes sense.

Without rewriting the whole tables I was looking if I could do something smart and then I noticed data-value and data-text in the from html example: https://examples.bootstrap-table.com/#welcomes/from-html.html

This sounded exactly what I wanted and I thought the data-value attribute could be use as value for eg the search and sort. But this attribute does not seem to do anything unfortunately.

1. What is the usage/idea behind these data-value and data-text attributes in the official from html example?
2. if these attributes are not meant for what Inwas hoping for os there something else I can do except rewriting the table; if no other solution I will do that but I want to explore my options.

Example(s)

https://examples.bootstrap-table.com/#welcomes/from-html.html

[UtechtDustin]

I'm not quite sure why the data-value and data-text attributes was added. But both have no effect for the BT, there is no attribute like this. The BT will just readd the data attributes to the created BT.

I don't think there is a reason to do what you try to achieve. The easiest way would be to use formatters, so the "base value" is the Linktext and with a formatter you render the whole link.

[marceloverdijk]

Yes indeed , keeping only the value in the html table and use formatters to create eg links etc is a good or option, or I might change it to json.

I was triggered by the data-value in the example and that's why I wanted to ask to be sure.

While thinking about it more it could be a nice feature 😁 When providing a data-value attribute BT could look at that value and not html content of the td element itself. What do you think?

[UtechtDustin]

@djhvscf @wenzhixin what do you think? As alternative we also have the option to use the customSearch and customSort option.

[marceloverdijk]

Thanks for sharing this further @UtechtDustin 👍

[marceloverdijk]

To give some idea.

Using a SSG generator like Astro Build I could create a page like:

  <table data-toggle="table"
         data-pagination="true"
         data-search="true">
    <thead>
      <tr>
        <th data-field="name" data-sortable="true">Name</th>
        <th data-field="matches" data-sortable="true">Races</th>
        <th data-field="seasons">Seasons</th>
      </tr>
    </thead>
    <tbody>
      {
        teams.map((team) => {
          return (
            <tr>
              <td data-value={team.name}><a href={`/teams/${team.id}`}>{team.name}</a></td>
              <td>{team.totalMatches}</td>
              <td data-value={team.seasons.map((season) => season.year).join(' ')}>
                <ul>
                  {
                    team.seasons((season)) => {
                      return (
                        <li>
                         <a href={`/seasons/${season.year}`}>{season.year}</a>
                        </li>
                      )            
                    })
                  }
                </ul>
              </td>
            </tr>
          )
        })
      }
    </tbody>
  </table>
</div>

which generates a static page which would contain rows like:

<tr>
  <td data-value="Team 1"><a href="/teams/1">Team 1</a></td>
  <td>89</td>
  <td data-value="2017 2019 2020 2021">
    <ul>
      <li>
       <a href="/seasons/2017">2017</a>
      </li>
      <li>
       <a href="/seasons/2019">2019</a>
      </li>
      <li>
       <a href="/seasons/2020">2020</a>
      </li>
      <li>
       <a href="/seasons/2021">2021</a>
      </li>
    </ul>
  </td>
</tr>

With the data-value set for the team name and the seasons this would be used for searching. Meaning like "href" will not result in hits. Plus no formatters are needed to be executed client side; all formatted output is generated at build time.

Furthermore I could change the seasons column to e.g.:

  <td data-value="2017 2019 2020 2021">
    <a href="/seasons/2017">2017</a>,
    <a href="/seasons/2019">2019</a>-<a href="/seasons/2021">2021</a>
  </td>

and it would still find the row when we search for "2020" ❤️

The more I think about this, this would be nice pattern for SSG generated websites.

What do you think?

(based on the existence of data-value in the mentioned example I have the feeling there was already an idea before to support this)

[marceloverdijk]

Maybe the implementation is straightforward? Checking the existence of the data-value attribute before https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js#L1032 and using it if available. And similar for sorting.

[marceloverdijk]

Another case I now bumped against for which this data-value could help: sorting:

I have a page from html data that looks like:

<table data-toggle="table" 
       data-pagination="true" 
       data-search="true">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>
          <span class="fi fi-hk me-2"></span>
          <a href="/drivers/adderly-fong">Adderly Fong</a>
        </td>
    </tr>
    <tr>
        <td>
          <span class="fi fi-de me-2"></span>
          <a href="/drivers/adolf-brudes">Adolf Brudes</a>
        </td>
    </tr>
    ..
  </tbody>
</table>

In above Persons table I have a name field that contains a flag icon inside the same td as the name like:

But when sorting on it will actually sort on the country code like hk, de etc. as it will sort on the full contents of the column and the country code is the first unique part.

I solved it with a bit of hackish workaround:

<thead>
  <tr>
    <th data-field="name" data-visible="false"></th>
    <th data-field="nationality_name" data-sortable="true" data-sort-name="name">Name</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>Adderly Fong</td>
      <td>
        <span class="fi fi-hk me-2"></span>
        <a href="/drivers/adderly-fong">Adderly Fong</a>
      </td>
  </tr>
  <tr>
      <td>Adolf Brudes</td>
      <td>
        <span class="fi fi-de me-2"></span>
        <a href="/drivers/adolf-brudes">Adolf Brudes</a>
      </td>
  </tr>
  ..
</tbody>

I introduced a hidden column only containing the name and use that for sorting the combined column.

Something like below - with data-value could have made this easier, and less hackish..:

  <tr>
    <td data-value="Adderly Fong">
      <span class="fi fi-hk me-2"></span>
      <a href="/drivers/adderly-fong">Adderly Fong</a>
    </td>
  </tr>

[UtechtDustin]

Thanks for the good comments and examples. But i'm not sure if Adolf is a good example in combination with a german flag :D

[marceloverdijk]

😄 I agree... https://en.wikipedia.org/wiki/Adolf_Brudes (racing driver). As his name starts with an "A" he is almost on top of my table 😉

[wenzhixin]

refs:

• #546
• #500
• #119

commit: https://github.com/wenzhixin/bootstrap-table/commit/4da4fadab666edd467d88552daef1036ccb6ea67

[marceloverdijk]

Hi @wenzhixin thanks for the refs for some view on the history of those data-value and data-text attributes and probably that's also the reason they were in some examples.

I'm trying to avoid (custom) javascript and making use of declarative html tables only if possible.

Do you think supporting something like that using data-* attributes for both sorting and filtering is feasible / considered as improvement for BT? Again, I'm now having a hack'ish approach with hidden <td>s unfortunately.