9. JS Bin
When working with DataTables it can often be useful to try code out in a simple test environment to evaluate a particular feature or perhaps to locate a problem in existing code. To make this process of building simple test cases as easy as possible we have a custom install of JS Bin which features customisations specific to DataTables.
JS Bin is a web-app that allows input of Javascript, HTML and CSS that is then run in the browser. You can save Bins to share with others. It is an open source program, developed by Remy Sharp of Left Logic and others and we owe them huge thanks for making this fantastic tool available to us!
JS Bin is particularly useful for DataTables when:
- Submitting a question in the forums to provide a test case showing the problem.
- When I answer an issue with a running code snippet
- Simply trying out a specific option or API method.
Using JS Bin
Actually using JS Bin is very simple; simply load http://live.datatables.net in your browser and start customising the HTML / Javascript / CSS as required. The buttons at the top of the browser window allow you to select what code is shown, and an option to see the final output.
To share a created bin click the Share menu at the top of the browser window and copy the URL shown. Add that URL to your forum post, e-mail or otherwise share it and other developers will be able to review your example.
Libraries / extensions
One of the customisations made for the DataTables JS Bin is to provide the ability to directly include DataTables core files and its extensions. To use a specific version of DataTables or an extras, simply select the Add library menu at the top of the browser and the required code will be added to the document.
If you are looking for a specific version of DataTables or an extras which is not shown in the Add library menu, the code can be found on the DataTables CDN and included from there.
Ajax loaded data
When working with the DataTables JS Bin it is often useful to have Ajax data available to work with, all of the Ajax data used in the Ajax and server-side processing examples are available for building test cases.
Ajax
The Ajax data used in the DataTables Ajax examples can be included from /ajax or /examples/ajax/data (the former is simply an alias for the latter). The files available for inclusion are:
arrays.txt- Array of arrays data source (example)objects.txt- Array of objects data source (example)orthogonal.txt- Array of object with orthogonal data (example)
Server-side processing
The scripts used for the server-side processing examples can be included from /ssp or /examples/server_side/scripts (the former is simply an alias for the later). The scripts available include are:
server_processing.php- Array of arrays data source (example)objects.php- Array of objects data source (example)
Registration
JS Bin provides the ability to register to sign in with a GitHub account. This provides the ability to view your saved Bins for later retrieval.
The DataTables JS Bin does not currently interface with your DataTables account.