Displaying concealed fields using the Bootstrap table detail formatter

I am attempting to create a customized detail formatter for my table, but I am encountering several fields with underscores, such as:

_id: undefined
_class: undefined    
_data: [object Object]

This occurs when I click the plus button.

<head>
    <!-- Necessary meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b065f4a49474e6b1a051a1d051b">[email protected]</a>/dist/bootstrap-table.min.css">  
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
      </head>
      <body>
        <div class="container">
                    <table id="table"
                        data-toggle="table"
                        data-filter-control="true"
                        data-show-search-clear-button="true"
                        data-sortable="true"
                        classes="table-sm"
                        data-pagination="true"
                        data-show-columns="true"
                        data-show-columns-toggle-all="true"
                        class="table-responsive"
                        
                        data-toolbar="#toolbar"
                        data-search="true"
                        data-show-refresh="true"
                        data-show-toggle="true"
                        data-show-fullscreen="true"
                        data-show-columns="true"
                        data-show-columns-toggle-all="true"
                        data-detail-view="true"
                        data-show-export="true"
                        data-click-to-select="true"
                        data-detail-formatter="detailFormatter"
                        data-minimum-count-columns="2"
                        data-show-pagination-switch="true"
                        data-pagination="true"
                        data-id-field="id"
                        data-page-list="[5, 25, 50, 100, all]"
                        data-show-footer="true"
                        >
                        <thead>
                            <tr>
                                <!--special characters and spaces not allowed in data-field name-->
                                <th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
                                <th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
                                <th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
                            </tr>
                        </thead>
                        <tbody>
                          
                          <tr>
                              <!--special characters and spaces not allowed in data-field name-->
                              <td data-field="columnA">a</td>
                              <td data-field="columnB">2</td>
                              <td data-field="columnC"> f </td>
                          </tr>
                          <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td> 4</td>
                            <td>d</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        </tbody>
                    </table>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script>
        function detailFormatter(index, row) {
            var html = []
            
            $.each(row, function (key, value) {
              html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            
            return html.join('')
          }
        </script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c2720272132237e2732313f3613627d62657d63">[email protected]</a>/dist/bootstrap-table.min.js"></script>
        <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495c89184878980a5d4cbd4d3cbd5">[email protected]</a>/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
    </body>
    </html>

The functionality of this specific formatter is not entirely clear to me. I desire increased control over individual fields rather than simply iterating through the entire object and displaying key-value pairs. Is there a way to achieve this?

javascriptajaxbootstrap-4bootstrap-table

Answer №1

To achieve the above, you can utilize the th data-field value to extract only the column name from the row and then use it to fetch the required value. Additionally, if you have set data-visible="false" for the tr element of column C, they will not be present in your DOM, making it impossible to retrieve their values using 

$("th:eq(" + (indexs + 1) + ")").data("field")
. However, if you are aware of the data-field value for the hidden column, you can use 
html.push('<p><b> yourcolumnfieldname :</b> ' + row['yourcolumnfieldname'] + '</p>')
.

Demo Code :

function detailFormatter(index, row) {
  var html = []
  var indexs = 0

  $.each(row, function(key, value) {
    //index +1 because first column is for `+`
    //and data-field is column a ,column b..etc
    var columns = $("th:eq(" + (indexs + 1) + ")").data("field")
    if (columns != undefined) {
      html.push('<p><b>' + columns + ':</b> ' + row[columns] + '</p>')
      indexs++;
    }
  })
  //here columnC matches with data-field value.
   html.push('<p><b> columnC :</b> ' + row['columnC'] + '</p>')
  return html;
}
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d30697c7f71785d2c332c2b332d">[email protected]</a>/dist/bootstrap-table.min.css">
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>

<body>
  <div class="container">
    <table id="table" data-toggle="table" data-filter-control="true" data-show-search-clear-button="true" data-sortable="true" classes="table-sm" data-pagination="true" data-show-columns="true" data-show-columns-toggle-all="true" class="table-responsive"
      data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true" data-click-to-select="true"
      data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[5, 25, 50, 100, all]" data-show-footer="true">
      <thead>
        <tr>
          <!--special characters and spaces not allowed in data-field name-->
          <th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
          <th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
          <th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td data-field="columnA">a</td>
          <td data-field="columnB">2</td>
          <td data-field="columnC"> f </td>
        </tr>
        <tr>

          <td>f</td>
          <td>4</td>
          <td>d</td>
        </tr>
        <tr>
          <td>f</td>
          <td>1</td>
          <td>h</td>
        </tr>

      </tbody>
    </table>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687da8396959b92b7c6d9c6c1d9c7">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaff2abbebdb3ba9feef1eee9f1ef">[email protected]</a>/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Using backticks to denote HTML syntax - Leveraging Google Charts to create

Has anyone found a way to incorporate HTML in ticks within a Google chart? I am attempting to insert a weather icon from This is my current attempt: const dailyData = new google.visualization.DataTable(); dailyData.addColumn('timeofday' ...

javascripttypescriptchartsgoogle-visualization

What is preventing my Button's onClick() method from being effective?

Below is a snippet of my HTML layout using the sciter framework: <div id="volume_micphone_slider" style="z-index:1;"> <input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" /> < ...

javascripthtml

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

Animating scrollTop using jQuery is a useful feature for creating

I am facing an issue with several section tags within a div that has overflow set to hidden. The structure of the code is as follows: <div id="viewport"> <section> content </section> <section> content </ ...

javascriptjqueryanimationscrolltop

"Adding an active class to a link based on the current page and locale: A step-by-step

Looking to add an active class to the subheader menu on the active page, but facing issues when changing the locale in the link. While it works for links like my-site/my-page, it doesn't work for links like my-site/fr/my-page. Utilizing Storyblok head ...

javascriptreactjsnext.jslocalizationchakra-ui

We encountered an error while trying to locate the 'socket.io' view in the views directory

Having an issue with my nodejs server. Check out the code below: server.js global.jQuery = global.$ = require('jquery'); var express = require('express'), path = require('path'), menu = require("./routes/menu"); var ...

javascriptnode.jsexpresssocket.ioview

Tips for preserving an HTML dynamic table in a database

I have a challenge where I am generating a dynamic HTML table using javascript. What is the best way to store this dynamic HTML table in a database using CodeIgniter? This is the code snippet for my input form: <table id="tb3" name="tb3"> & ...

javascriptphphtmlcodeigniter

Removing single quotes and replacing them with spaces when passing data from JavaScript to MySQL

I'm currently focused on JavaScript using Hapi.js in my role at the company. My main task involves retrieving data from MongoDB and transferring it to a MySQL database. The challenge arises when dealing with data that contains single quotes within th ...

javascriptmysql

Getting the specific information you need from a JSON object in Angular 2

Struggling to extract specific data from a JSON file with nested objects like this: { "results" : [ { "address_components" : [ { "long_name" : "277", "short_name" : "277", "types" : [ "street_number" ] ...

javascriptangularjsjson

A guide on updating data dynamically in Vue.js

I am facing an issue with Vue JS in my frontend development. Here is the data for my component - data: () => ({ email: "", showError : false }), Below is the corresponding HTML code - <div v-show='showError' c ...

javascriptvue.js

The Price Filtering feature in the MERN Stack for Products is currently experiencing technical difficulties

Hey there! I am currently working on developing an Ecommerce Application using the MERN Stack with redux. I've encountered a problem while trying to send a price array argument in my fetching function. The error message states: XHR GET http://localhos ...

javascriptnode.jsreactjsmongodb

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Upon loading the root of my web app, I encountered an error. The react-textarea-code-editor component is accessed via a separate route. The same error persisted even after following the suggestions provided here: Adding react-textarea-code-editor to the ...

javascriptreactjsremix.run

How come .trim() isn't cooperating with me?

I am encountering an issue with this particular piece of javascript. Every time I attempt to use it, nothing is displayed in my div. Instead, it simply adds ?weight=NumberInputed&measure=lbsOrkgs&submit=Submit to the URL. <h2>What size d ...

javascripthtml

Asynchronous Middleware in ExpressJS Routing

I'm having trouble implementing a middleware in Express. Whenever I make a request, I end up with infinite loading times. I've searched on various platforms but couldn't find any examples that utilize an async await middleware stored in a se ...

javascriptnode.jsexpress

"Error message: PHP throwing an undefined index error when using

I am struggling with a specific issue regarding sending POST data to a PHP file for database insertion. Despite looking at various solutions, I keep encountering a PHP notice stating undefined index arg1 and arg2. Below is the ajax code snippet: function ...

phpjqueryajax

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

Compel a WordPress page to reload

==Current Setup== At the moment, I am utilizing Wordpress to showcase announcements. We have one server hosting Wordpress and four separate PCs that display the announcements. Each PC has its unique page URL for displaying the announcement. For instance: ...

phpjqueryajaxwordpress

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

javascripthtmlcss

Incorporating TypeScript with jQuery for efficient AJAX operations

I recently added jQuery typings to my TypeScript project. I am able to type $.ajax(...) without encountering any compile errors in VS Code. However, when I test it on localhost, I receive an error stating that "$ is not defined." In an attempt to address t ...

javascriptjqueryajaxtypescript

The date format is malfunctioning -> Error: The date provided is not valid

My goal is to convert the date format from 2022-01-17T21:36:04.000Z to January 18th using the npm package, dateFormat. I found success with the following code snippet: const date = dateFormat("2022-01-17T21:36:04.000Z", "mmmm dS"); However, when trying t ...

javascriptreactjsdate