html: el contenido se muestra como texto sin formato, cuando uso data-toggle="table"

CorePress2024-01-25 9

Quiero usar bootstrap data-toggle="table", pero cuando lo habilito, comienza a representar todo el contenido en <td> como texto sin formato (ignorando las etiquetas).

Mi código se ve así

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bootstrap : CRUD Table</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="table-wrapper">
    
<table id="table" class="table table-striped table-hover table-responsive"
             data-toggle="table"
             data-filter-control="true" 
             data-click-to-select="true">
    <thead>
        <tr>
            <th>Name1</th>
            <th>Name2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-toggle="modal">     
            <p>My Text Here</p>
            </td>
            <td data-toggle="modal">     
            <p>My Text Here</p>
            </td>
        </tr>
        
    </tbody>
</table>

<!-- partial -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script  src="./script.js"></script>

</body>
</html>

Todo funciona como siempre, cuando elimino data-toggle="table"

Puedo ver etiquetas, no texto sin formato. ¿Puedes explicar un poco más lo que estás tratando de lograr?

- Denis Omerovic

28 de marzo, 2021 a las 8:29

Quiero representar etiquetas en <td> como marcado html habitual. Pero de alguna manera solo lo muestra como texto dentro de una tabla cuando uso alternar datos

- Vitali Dzikavitski

28 de marzo de 2021 a las 8:44

------------------------------------

Aquí tienes. Acabo de agregar "data-escape="false"" en la definición de la tabla.

https://codepen.io/shubham-sharma-the-looper/pen/KKaMWGL

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bootstrap : CRUD Table</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="table-wrapper">
    
<table id="table" class="table table-striped table-hover table-responsive"
             data-toggle="table"
             data-filter-control="true" 
             data-click-to-select="true" data-escape="false">
    <thead>
        <tr>
            <th>Name1</th>
            <th>Name2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-toggle="modal">     
            <p>My Text Here</p>
            </td>
            <td data-toggle="modal">     
            <p>My Text Here</p>
            </td>
        </tr>
        
    </tbody>
</table>

<!-- partial -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script  src="./script.js"></script>

</body>
</html>

------------------------------------

Cuando ejecuto tu código veo html, no texto plano.

Porque no envié el encabezado con las referencias. En este fragmento simplemente ignora las propiedades desconocidas y se representa normalmente.

- Vitali Dzikavitski

28 de marzo de 2021 a las 8:53

Actualización: agregar encabezado

- Vitali Dzikavitski

28 de marzo de 2021 a las 9:23

randomThread

html - ¿Cómo puedo agregar y eliminar un ícono de Font Awesome en un evento de clic (Javascript)?curl - La publicación con el cliente HTTP Symfony 4.4 no funciona, código de estado 422 java - MainActivity con inyección de dependencia tidyverse - R: ejecuta una función hasta que la prueba condicional en la salida anterior de la función sea verdadera para todas javascript - Exportación de definiciones de tipos mecanografiados asp.net mvc - Entity Framework agrega registro dos veces ¿Es posible utilizar un genérico que extienda una clase que contenga un genérico?Python - Seaborn, matplotlib no reconoce el tiempo como tiempo Swiftui, cómo cambiar el radio de sombra de la vista al tocar c#: aparece este error "El argumento 2 no se puede convertir de System.Collections.Generic.IEnumerable cadena a cadena"c++: ¿Cómo ejecuto un determinado archivo .cpp en Visual Studio?r - ¿Cómo rellenar el área debajo/arriba de la curva con diferentes colores por encima y por debajo de 0?

html: el contenido se muestra como texto sin formato, cuando uso data-toggle="table"

Su guía para un futuro mejor - libreflare

Categoría