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

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:

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:

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>

si quelqu'un a une idée, je suis preneur.

Merci par avance

Cordialement