How do I use the examples?
How do I use the examples?
Carneno
Posts: 36Questions: 7Answers: 0
Hello,
I'm using jquery.datatables 1.10.15, jquery 1.12.4 in Visual Studio 2017 Community with an ASP.NET MVC 6 program.
I already have my own DataTables function running the way I want it to.
When I try to run the example from here: https://datatables.net/examples/api/select_row.html, I don't see the results as shown on that same page.
The row selection works, but the button does not show.
I added these lines to the .cshtml file:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
.
I copied the javascript exactly as it is in the example.
I copied the HTML exactly as it is in the example.
I also tried it here:live.datatables.net/ and it still does not show the same results.
Are the examples supposed to run without adding any additional code?
I could post the complete .cshtml file here, but I would need to take out much of the HTML data so that it is not so long.
Any help that anyone can provide to figure out what I am doing wrong would be gratefully appreciated.
Thanks,
Tony
This question has an accepted answers - jump to answer
Answers
The js at your live.datatables.net link is not the same as the js at the example link.
You need to supply a more specific reference.
The button does not automatically show. You need to add it to your html. If you view the source of the example its line 83.
</div><button id="button">Row count</button>In most cases the examples will run with the code provided in the example. But if there are extra html elements as part of the example then you need to look at the source for the additional code.
Kevin
@tangerine,
Thanks for your help.
I'm sorry, that link I gave was just a reference to that website. I didn't mean to indicate that link as my test.
I did copy the example javascript to the JavaScript tab there to test it. I just didn't save it.
Thanks,
Tony
@kthorngren,
Thanks for your help.
I see. I added the button line and it did work.
I have to remember to look at the source when trying the examples.
Thanks,
Tony
@kthorngren,
I know that I marked your reply as an answer to my question, but I am having a terrible time with trying to execute these examples.
I tried using this example and it still does not show a button: https://datatables.net/extensions/buttons/examples/initialisation/custom.html
.
It does not give an error, it just does not display the button.
Again, I copied everything exactly the way it is in the example.
I looked at the source code and there is no button element.
I'm sorry for being so incapable of figuring this out, but I just can't see what I am doing wrong.
Thanks,
Tony
In this case there is no extra code in the HTML for the buttons. The Javascript code along with the buttons library should display the button. Its hard to say what the problem is without looking at your code. Typical problems are that the buttons library
dataTables.buttons.min.jsandbuttons.dataTables.min.cssaren't being loaded or thedomoption is not configured with theB, for exampledom: 'Bfrtip'.The best option is to provide a link to a page showing the issue. This page will describe some options:
https://datatables.net/manual/tech-notes/10
Kevin
Kevin,
Thanks again for your help.
You can view this link to see what it looks like: tonygirgenti.biz/DataTableTest
Tony
I'm not familiar with the Visual Studio environment but a couple things you might look at. First I see this error:
ai.0.js:1 POST https://dc.services.visualstudio.com/v2/track 400 (Invalid instrumentation key)It might not affect anything. Second is to make sure you are loading jquery and datatables only once. You jquery and datatables JS/CSS includes stating at line 59 and you have bundles referencing both starting at line 555. Loading them twice does cause problems. I'm not sure what the bundles are.
Kevin
Kevin,
Thanks for your analysis of my website page. I obviously need to figure out how to fix the error and get rid of the duplicate loading of scripts. I will need to ask in the Visual Studio forums.
I did manage to create this test: live.datatables.net/nazepazu/1/edit?html,css,js,console,output
.
It does show the button, but clicking it does not give the alert. I'm not sure that is important at this point. I just wanted to prove to myself that the example code does work in showing the button.
So, I have work to do to get it to work in my environment.
Thanks,
Tony
Depending on the browser the alert will not be displayed. If you look at the browser's console (not the JS Bin console tab) you will probably see a message like this:
You can use
console.login place ofalertto see the result.Kevin
Hi
On Chrome JS Bin Console shows error but If you go to the "live" version of your test you will see it works.
If you also follow what kthorngren said about using "console.log()" instead of alert() you will see that it shows "Button activated".
It also works on MsEdge even on JS Bin's editor mode.
I've created a JS Bin clone of your code as it expired in order you can test :
Test
Just a side note. I have had more success running the browsers built in console (press f12) then using the one provided with jsbin
Agreed. The one in JSBin can be really really slow if you accidentally do something like try to log a DataTables API instance!
Allan