javascript - Datatables Bootstrap theme not applying when using ReactJS -


i new requirejs, please gentle!

below link html , js , if run see datatable initialized correctly not applying bootstrap theme.

link problem:

https://jsfiddle.net/sajjansarkar/c2f7s2jz/2/

what doing wrong?

below js (in case fiddle doesnt work):

requirejs.config({   paths: {     'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',     'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',     'datatables': 'https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min',    },   shim: {     'bootstrap': {       deps: ['jquery']     },     'datatables': ['jquery', 'bootstrap'],    } });   require([   'jquery',   'bootstrap', , 'datatables' ], function($, bootstrap, datatables) {   'use strict';    $('#example').datatable(); });

html:

<head>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.datatables.min.css" />   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min.css" /> </head> <body> <table id="example" class="table table-striped table-bordered table-hover table-condensed dt-responsive data-table" cellspacing="0" width="100%">   <thead>     <tr>       <th>name</th>       <th>position</th>       <th>office</th>       <th>age</th>       <th>start date</th>       <th>salary</th>     </tr>   </thead>   <tbody>     <tr>       <td>tiger nixon</td>       <td>system architect</td>       <td>edinburgh</td>       <td>61</td>       <td>2011/04/25</td>       <td>$320,800</td>     </tr> ... </tbody></table>  </body>

there number of problems trying do:

  1. the file use datatables in paths looks contains bunch of anonymous amd modules concatenated together. anonymous module module define call not set module name. such modules module name require call initiated loading. you cannot concatenate anonymous modules make bundle. calls define must also changed add module name first argument define call. file may useful people not use module loader, cannot use requirejs.

    so have setup separate paths datatables , datatables.bootstrap.

  2. your shim datatables useless because datatables calls define , shim files not call define.

  3. if want use bootstrap stylings datatables, must load datatables.bootstrap 1 way or another. not that. (even if bundle load fixed work requirejs, you'd have explicitly request datatables.bootstrap somewhere.)

  4. datatables.bootstrap try load datatables.net rather datatables. need refer datatables datatables.net everywhere or can use map below.

i proper results if modify javascript this:

requirejs.config({   paths: {     'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',     'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',     'datatables': 'https://cdn.datatables.net/1.10.15/js/jquery.datatables.min',     'datatables.bootstrap': 'https://cdn.datatables.net/1.10.15/js/datatables.bootstrap.min',   },   shim: {     'bootstrap': {       deps: ['jquery']     },   },   map: {     '*': {       'datatables.net': 'datatables',     }   }, });   require(['jquery', 'datatables.bootstrap'], function($) {   'use strict';    $('#example').datatable(); });

here's forked fiddle.


Comments

Post a Comment

Popular posts from this blog

html - How to set bootstrap input responsive width? -

Image
i need inline form calendar in both fields. reason can't rid of space between text , borders of input... here picture of problem i've tried set width parent div , input itself.... no good.. here i've done far. fiddle : <div class="modify_search"> <div class="search_wrapper"> <div class="search_header"> <form class="form-inline"> <div class="left"> <span>du</span> <div class="input-group"> <input type="text" class="form-control search_input" id="inlineforminputgroup"> <div class="input-group-addon"> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div>
Read more

javascript - Highchart x and y axes data from json -

here js fiddle : demo i plotting differences of timestamps in multiple series reading data json. how plot "timestamp","timestamp2","timestamp3" against "tempersensordata" instead of steps? var processed_json = new array(); //ts1 var processed_json1 = new array(); //ts2 // populate initial series (i = 0; < data.length; i++){ processed_json.push(data[i].timestamp/1000); processed_json1.push(data[i].timestamp2/1000); }
Read more

javascript - Get js console.log as python variable in QWebView pyqt -

Image
i'm trying build application creates html + js code python , loads qwebview. the final html + js code following (raw code available here ): <head><meta charset="utf-8" /><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><div id="mydiv" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.plotlyenv=window.plotlyenv || {};window.plotlyenv.base_url="https://plot.ly";plotly.newplot("mydiv", [{"type": "scatter", "x": [6.81, 6.78, 6.49, 6.72, 6.88, 7.68, 7.69, 7.38, 6.76, 6.84, 6.91, 6.74, 6.77, 6.73, 6.68, 6.94, 6.72], "y": [1046.67, 1315.0, 1418.0, 997.33, 2972.3, 9700.0, 6726.0, 6002.5, 2096.0, 2470.0, 867.0, 2201.7, 1685.6, 2416.7, 1618.3, 2410.0, 2962.0], "mode": "markers", "ids": [0, 1, 2, 3, 4, 5, 6, 7, 8,
Read more