CODEWITHSUNDEEP
javascriptdatatables
user3732216
user3732216

Reputation: 1589

Modifying TableTools With Datatables

I'm trying to find out how I can add a button to right before the copy button that will always be a link to the create page of the resource. So if its on /users and in the list of buttons if a user clicks Add then it goes to /users/create. How would I do that with my code below. I also have a couple of errors and researched it and found out my errors might be due to the order in which my files are rendered. I have included the order below. I'm hoping someone can help me out somehow.

TypeError: jQuery[g3g][((((Y2 + Z3) + G4) + p1) + F9e)] is undefined


...((Y2+G4+d6g+Z3+G4+A1e+U2+y8g))):jQuery&&!jQuery[g3g][(Y2+Z3+G4+p1+F9e)][(y8+t5e+...


dataTab...itor.js (line 475, col 170)
TypeError: DataTable.Editor is undefined


DataTable.Editor.defaults.display = "bootstrap";

editor....trap.js (line 8)


$('document').ready(function() {
    $('#myDatatable').dataTable({
        "pagingType": "full_numbers",
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [-1] },
            { 'sWidth': '30px', 'aTargets': ['idTH'] },
            { 'sWidth': '150px', 'aTargets': ['actionsTH', 'subTH'] },
            { 'sClass': 'text-center', 'aTargets': ['idTH', 'actionsTH', 'subTH'] }
        ],
        "iDisplayLength": 10,
        "aLengthMenu": [
            [5, 10, 25, 50, -1],
            [5, 10, 25, 50, "All"]
        ],
        dom: '<"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
        "oTableTools": {
            "sSwfPath": "vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
        }
    });
});

<script src="http://myapp.app/vendor/jquery/jquery-1.11.1.min.js">
<script src="http://myapp.app/vendor/jquery/jquery_ui/jquery-ui.min.js">
<script src="http://myapp.app/assets/js/bootstrap/bootstrap.min.js">
<script src="http://myapp.app/assets/js/utility/utility.js">
<script src="http://myapp.app/assets/js/main.js">
<script type="text/javascript">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/jquery.dataTables.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/dataTables.editor.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/editor.bootstrap.js">
<script src="http://myapp.app/assets/js/my-datatables.js">

Upvotes: 1

Views: 254

Answers (1)

chris
chris

Reputation: 36947

Well one, in your <script> tags section, you open a tag but never close it. That is likely your odd error you're not defining. Not so much as the placements of the scripts or the order they are in.

As for adding a button to your UI, sometimes the way datatables explains it, it won't always work in your favor, more so as those buttons are flash based.

I'd say for the sake of example: after your call to $('#myDatatable').dataTable({});

Simply append the element via standard jquery methods..

ie: 

$('#myDatatable').append('<div style="width:100px;height:30px;background-color:#F60;color:#fff;position:absolute;top:2px;right:275px;">Hello</div>');

Again primarily for the sake of example, you can tweak as needed but you can basically get this right up snug next to those buttons should you like you could likely get it in the button container, but then your going to mess with extra styling, positioning, etc.. easiest to go next to all around if your getting a feel for things overall.

Upvotes: 2

Related Questions