[Boostrap table] Impossible de lire une source json interne ou externe au script

**la_fouine1806** · 08/11/2019, 22h28

Hey,

je ne comprends pas pourquoi ca ne marche... je ne peux pas lire un fichier JSON avec les data-url de bootstrap et si je le mets dans le script, je n'y arrive pas également.

quelqu'un a une idée ?

voici mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!-- begin snippet: js hide: false console: true babel: false -->
 
<!-- language: lang-html -->
 
    <!DOCTYPE html>
    <html lang="en">
 
    <head>
      <link rel="stylesheet" type="text/css" href="css/header.css">
      <link rel="stylesheet" type="text/css" href="css/footer.css">
      <link rel="stylesheet" type="text/css" href="css/forms.css">
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
      <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
      <script src="js/jquery.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
 
 
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
    </head>
    <meta charset="utf-8">
    <title>Listing</title>
 
    <body>
      <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Inventaire</a>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item ">
                <a href="index.html"><img src="icon/home.png" title="Page d'accueil" alt="Page d'accueil" width="40" height="40"> <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a href="listing.html"><img src="icon/list.png" title="Liste des fiches" alt="Liste des fiches" width="40" height="40"></a>
              </li>
              <li class="nav-item">
                <a href="forms.html"><img src="icon/add.png" title="Ajout d'une nouvelle fiche de restauration" alt="Ajout d'une nouvelle fiche de restauration" width="40" height="40"></a>
              </li>
              <li class="nav-item">
                <a class="active" href="about.html"><img src="icon/us.png" title="A propos" alt="A propos" width="40" height="40"></a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <div class="container">
      <table id="table" data-toggle="table" data-height="460" data-search="true" ><!--data-url="data.json">-->
        <thead>
          <tr>
            <th data-field="id">#</th>
            <th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
            <th data-field="type" data-formatter="nameFormatter">Type</th>
            <th data-field="artist" data-formatter="nameFormatter">Artiste</th>
            <th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
          </tr>
        </thead>
      </table>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      <script>
      var $table = $('#table')
 
      $(function() {
        var data = [
          {"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
        ]
        $table.bootstrapTable('refresh',{data: data})
      })
 
        function nameFormatter(value) {
          return 'Formatted ' + value
        }
      var $table = $('#table')
 
      $(function() {
        var data = [
          {"id":1,"oeuvre":"pinceau","type":"ivoire","artist":"moi","sheet":"<a href=\"description.html\">"}
        ]
        $table.bootstrapTable({data: data})
      })
    </script>
      </script>
    </div>
    </body>
 </html>