Replies

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2022

  You are using conflicting CSS files:

  "node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css",
  "node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
  

  Remove the jquery.dataTables.min.css. See the Styling docs for details. Make sure you are getting the correct Datatables Bootstrap integration files for the version of Bootstrap you have. Use the Download Builder to get the proper files.

  Kevin
• vikCle Posts: 8Questions: 0Answers: 0

  March 2022 edited March 2022

  Thank you Kevin,
  I've checked the bootstrap version is v5.1.3.
  I've removed jquery.dataTables.min.css and
  also I've tried to replace the bootstrap files which Angular ng tool automatically installed with the files from the Download Builder :"DataTables-1.11.5/css/dataTables.bootstrap5.css" and "DataTables-1.11.5/js/dataTables.bootstrap5.js" the result is the same.
  Any other suggestions to fix it?

   "styles": [
                "src/styles.css",
                "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/assets/DataTables/DataTables-1.11.5/css/dataTables.bootstrap5.css"
                        
              ],
              "scripts": [
                "node_modules/jquery/dist/jquery.js",
                "node_modules/datatables.net/js/jquery.dataTables.js",
                "src/assets/DataTables/DataTables-1.11.5/js/dataTables.bootstrap5.js",
                "node_modules/bootstrap/dist/js/bootstrap.min.js"
              ]
  

  Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• colin Posts: 15,177Questions: 1Answers: 2,590

  March 2022

  Can you link to your page, please, so we can take a look,

  Colin
• vikCle Posts: 8Questions: 0Answers: 0

  March 2022

  Hello Colin, how do you want me to link my page so you can see it?
  Bellow is the html page:

  ```

  	ID	First name	Last name	Action
  	{{ person.id }}	{{ person.firstName }}	{{ person.lastName }}	Delete
  No data!

  ```
• colin Posts: 15,177Questions: 1Answers: 2,590

  March 2022

  There's conflict with the files, so easiest way for us to support you would be if we can see the page. If it's on the internet, if you could post the address, we can debug it for you,

  Colin
• vikCle Posts: 8Questions: 0Answers: 0

  March 2022

  Hi Colin, I posted my code to
  https://stackblitz.com/edit/angular-ivy-mkgdsa?file=package.json
  but there I got 'Cannot find namespace 'DataTables'' error
  (@types/datatables.net - is included)
  Any idea?
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 2022

  I've never tried to set up an Angular app in Stackblitz I'm afraid, so I don't immediately know what is going wrong there. I'm guessing you don't get that issue locally, so rather than debugging the Stackblitz to get to the point where you already are, if you can link to your existing page that will speed things up.

  Allan
• vikCle Posts: 8Questions: 0Answers: 0

  March 2022

  Hi Allan, I'm gladly do this, I'm just not sure how can I link my local page localhost:58211/server-side
• colin Posts: 15,177Questions: 1Answers: 2,590

  March 2022

  It needs to be a page that's accessible externally, so we can debug it,

  Colin
• vikCle Posts: 8Questions: 0Answers: 0

  March 2022

  Hi all, I've been looking more, it looks like the problem is based on the initial error which I was trying to fix :
  Error: node_modules/datatables.net/types/types.d.ts:33:9 - error TS2717: Subsequent property declarations must have the same type. Property 'dataTable' must be of type 'StaticFunctions', but here has type 'jQueryDataTable'.

  33 dataTable: jQueryDataTable;
  ~~~~~~~~~

  node_modules/@types/datatables.net/index.d.ts:17:5
  17 dataTable: DataTables.StaticFunctions;
  ~~~~~~~~~
  'dataTable' was also declared here.