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

python - Best design pattern for collection of objects -

i have following architecture: +-----------------+ | collection | | | | | | | | | +-----------------+ | ^ | | create() | | | | v | getitem(b) +------------+ | | item | | | | | | +------+ | | +------------+ a class managing collection of items, creates items. , these items may need other items collection. the actual code in python, , collection passes parameter created item . see it, bad practice. improvement can see pass few functions of collection needed item , instead of whole instance. for example: class collection: getitem(self, id): ... createitem(self, id): item = item(id, self) # <-- pass self ... class item: __init__(self, id, col): ... col.getite...
Read more

go - serving up pdfs using golang -

Image
just wondering if guys can code. it works serving images not pdf brochure. in advance func main(){ http.handlefunc("/", func(w http.responsewriter, r *http.request){ filename := "/var/www/filedipenser/brochure.pdf" streampdfbytes, err := ioutil.readfile( filename ) if err != nil { fmt.println(err) os.exit(1) } b := bytes.newbuffer(streampdfbytes) w.header().set("content-type", "application/pdf") if _, err := b.writeto(w); err != nil { fmt.fprintf(w, "%s", err) } w.write([]byte("pdf generated")) }) err := http.listenandserve(":4111", nil) if err != nil { log.fatal("listenandserve: ", err) fmt.println(err) } } the code bit inefficient appears working. however, pdf viewers might sensitive extraneous output adding end of http response stream...
Read more

how to add preprocess loader in webpack 2 -

i trying add preprocess loader in webpack 3. have installed successfully. not working here's webconfing file var debug = process.env.node_env !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "./js/app.js", module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader!preprocess-loader?+debug', // query: { // presets: ['react', 'es2015'], // plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], // } }, { test: /\.css$/, loader: "style-loader!css-loader!sass-loader" } ] }, output: { path: __dirname + "/src/", f...
Read more