How Do I add items to pop-up modals and stylize ADD-EDIT-DELETE buttons

lavapotato

Im struggling with some what I hope are basic items when using datatables editor.

1) for the modal pop-ups that occur when editing or adding how do I modify these. For instance Id like to add a cancel button beside the create button when adding and also provide some informational text inside the modal pop-up to help users

2) the default New-Edit-Delete buttons I want to stylize using bootstrap

ie. <button class="btn btn-complete btn-lg fs-17 bold ls-negone" data-toggle="modal" data-target="#addFAQ"><i class="fa fa-plus"></i> Add New FAQ</button>

Ive looked high and low and Im at a total loss as to where and how to do this. These simple items are proving to be a huge time vampire so hoping this is doable.

Thanks for any help

allan

Hi,

For instance Id like to add a cancel button beside the create button

Use the buttons() API. If you want to modify the TableTools "edit" button, you would use the $.fn.dataTable.TableTools.BUTTONS.editor_edit.formButtons array to define your buttons (with the same array options that buttons() takes.

There is an example of how to use the formButtons option here.

also provide some informational text inside the modal pop-up to help users

For fields use the fields.fieldInfo option. You can also use the API method field().message().

the default New-Edit-Delete buttons I want to stylize using bootstrap

Have you included the Bootstrap integration files?

Thanks,
Allan

lavapotato

Thanks Allan,

But the docs are proving fruitless for me. I've searched high and low through the website, the forums, Google you name it and for some reason cannot find a concrete and simple example of how to...

1) change the style of the Add-Edit-Delete buttons as used by the editor to have it take on bootstrap button style - should be easy but Ive exhausted every avenue here

example: Heres the button I would like to see for say adding a new item
<button class="btn btn-complete btn-lg fs-17 bold ls-negone" ><i class="fa fa-plus"></i> Add New Item</button>

I have bootstrap fully integrated into my framework so that's a non issue

Im assuming I could place the class portion into some sort of class setting somewhere but unable to find where

2) adding a simple cancel button in the modal pop-up that appears when adding, editing or deleting

Ive purchased the editor addon and cannot find the answers I need. My framework already has bootstrap included so the datatables is simply added into my framework and that part works fine.

The editor itself is working fine and I have it hooked up to my dbase so all good there and it has been a real time saver for sure. However the simplest of tasks in terms of styling the datatables has been a real nightmare. It's likely me but it's been a struggle.

:::::::::::

What I have now...

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {

    ajax: "/path to script here",
    table: "#glossary",
    fields: [ {
            label: "Name:",
            name: "name"
        }, {
            label: "Details:",
            name: "details"
        }, {
            label: "Status:",
            name: "status"
        }
    ]
} ); 

var table = $('#glossary').DataTable( {

    "sRowSelect": "multi",
    "lengthChange": true,
    "lengthMenu": [ [25, 50, -1], [25, 50, "All"] ],
    "pagingType": "full_numbers",
    "responsive": true,
    "iDisplayLength": 25,       

    ajax: "/path to script here",
    columns: [          
        { data: "name" },
        { data: "details" },
        { data: "status" }          
    ]

} ); // .....................end

var tableTools = new $.fn.dataTable.TableTools( table, {

    sRowSelect: "os",
    "sSwfPath": "/path to swf here",
    aButtons: [
        { sExtends: "editor_create", editor: editor, sButtonText: "Add New"},
        { sExtends: "editor_edit",   editor: editor },
        { sExtends: "editor_remove", editor: editor },          

        {
            "sExtends": "csv",
            "sButtonText": "<i class='pg-grid'></i>",

        }, {
            "sExtends": "xls",
            "sButtonText": "<i class='fa fa-file-excel-o'></i>",
        }, {
            "sExtends": "pdf",
            "sButtonText": "<i class='fa fa-file-pdf-o'></i>",
        }
    ] 

} );    

$( tableTools.fnContainer() ).appendTo( '#glossary_wrapper .col-sm-6:eq(0)' );  

} );

One last question in regards to editor and server side processing, is this using PDO prepared statements for adding and editing of data?

Thanks again for your help, product is great but Im not a jscript guru and just need a solid example to work from and should be good to go

allan

1) change the style of the Add-Edit-Delete buttons as used by the editor to have it take on bootstrap button style - should be easy but Ive exhausted every avenue here

Try:

{ sExtends: "editor_create", editor: editor, sButtonText: "<i class="fa fa-plus"></i> Add New Item", sButtonClass: "btn btn-complete btn-lg fs-17 bold ls-negone"},

I am assuming that you have included the DataTables / Bootstrap integration file.

2) adding a simple cancel button in the modal pop-up that appears when adding, editing or deleting

Use:

{ sExtends: "editor_edit",   editor: editor, formButtons: [
  { label: 'Cancel', fn: function () { this.close(); },
  'Submit'
]  },

Unfortunately you need to add the formButtons option to all three TableTools buttons, assuming you want the cancel button on all three form types.

One last question in regards to editor and server side processing, is this using PDO prepared statements for adding and editing of data?

Yes :-).

Hope this helps!

Allan

lavapotato

Awesome, thanks Allan. I'll give these a try.

Question - Are you available to help fix a bunch of these small types of items we have? Paid work of course.

We have a framework in place but we have a number of small nagging items we just need to get done and out of the way as we're finding we are spending way to much time trying to get things in datatables done (sifting through forums etc) that I'm sure you could do rather easily.

Please let me know if interested and I can prepare a list of items for you and you can quote me a cost or I see you have support credits, whatever works best for you.

Thanks again

allan

Hi,

At the moment I'm afraid I'm not available outside providing support for the software published on this site. Too many new features I'm working on :-)

Allan

lavapotato

Not a problem, thanks again

lavapotato

Allan,

Sorry still having 1 issue with trying to get a "Cancel" or "Close" button to show up when using the Editor for adding/editing pages in the modal popup.

You provided me with this...

{
  sExtends: "editor_edit",  
  editor: editor,
  formButtons: [ 
    { label: 'Cancel', fn: function () { this.close(); }, 
    'Submit'
  ]
},

But it errors out...

SyntaxError: missing : after property id
label: 'Cancel', fn: function () { this.close(); },'Submit' ] },

:::::::::::::::

1. Id like to get a cancel button for those modal popups - not sure if I need to remove what I have below or append to it?
2. is there also a way to add a class to the buttons in the modal popups (add, cancel, delete etc) so I can stylize them easily?

I have the following in place...

aButtons: [
            { sExtends: "editor_create", editor: editor, sButtonText: "<i class='fa fa-plus'></i> Add New Item", sButtonClass: "btn btn-complete btn-lg fs-17 bold ls-negone m-r-5" },
            { sExtends: "editor_edit",   editor: editor, sButtonText: "Edit", sButtonClass: "btn btn-complete btn-lg fs-17 bold ls-negone m-r-5" },
            { sExtends: "editor_remove", editor: editor, sButtonText: "Delete", sButtonClass: "btn btn-danger btn-lg fs-17 bold ls-negone m-r-10" }
]

Thanks again

allan

Sorry - there was a missing } in my code - this should do it:

{
  sExtends: "editor_edit", 
  editor: editor,
  formButtons: [
    {
       label: 'Cancel',
       fn: function () {
         this.close();
       }
    },
    'Submit'
  ]
},

I've just tried it to make sure it works this time, and it does :-).

To show a Cancel button on all three forms (create, edit, remove) you need to provide the formButtons option that you want for each of the three buttons.

is there also a way to add a class to the buttons in the modal popups (add, cancel, delete etc) so I can stylize them easily?

Yes, the formButtons array is passed directly to the buttons() method so you can use any of the options described there. Specifically the button-options type that is passed into buttons() provides a className option, so you might use:

{
  sExtends: "editor_edit", 
  editor: editor,
  formButtons: [
    {
       label: 'Cancel',
       fn: function () {
         this.close();
       },
       className: "cancel"
    },
    'Submit'
  ]
},

If you would like a custom class name for the Submit button you would need to provide the submit button information as an object as well (can call submit() in the fn function).

Allan

lavapotato

Works like a charm

Thanks!

lavapotato

Sorry Allan, one more small item.

I also have inline edit and delete links for each row. Now when the modal is fired from those links the modal pop-up I also need to have a cancel button and to be able to style them but once again stumped. Can you provide an example using my code below

Here's an example of what I have right now which just has the default modal button so I need not only the update button bit a cancel button and to be able to style the cancel and update buttons as well...

// Edit a record inline for each row
    $('#glossary').on('click', 'a.editor_edit', function (e) 
    {
        e.preventDefault(); 
        editor.edit( $(this).closest('tr'), {
            title: '<h3 class="p-b-5"><span class="semi-bold">Edit Record</span></h3>',
            buttons: 'Update'
        } );
} );

Thanks again and sorry for all the small items.

allan

The second parameter of edit() accepts a form-options object. That includes a buttons option, which (like above) is simply passed to buttons(). So at the moment in your code you have a single Update button. If you want a cancel button there as well, you would just add the buttons array we discussed in its place.

Allan

lavapotato

Thanks Allan, got it working now.