DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Editor Question

Editor Question

markscottmarkscott Posts: 7Questions: 1Answers: 0
in Free community support

I am using Bootstrap and DataTables/Editor.

In Google Chrome the table renders ok within a normal Bootstrap container and has Bootstrap styling, but in Internet Explorer the table renders as full width and doesn't have Bootstrap styling.

I have been using Bootstrap for some time and I have never seen these inconsistencies in browsers when using it so there must be something in my code that is breaking Internet Explorer - but I don't know what.

Here is the code:

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Editor</title>

  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
  <link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">

  <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
  <script type="text/javascript" language="javascript" src="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>

  <script type="text/javascript" class="init">
  var editor; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
      editor = new $.fn.dataTable.Editor( {
          ajax: "php/table.php",
          table: "#table",
          fields: [
          {
           "label": "column1",
           "name": "column1",
           "type": "text"
          },
          {
           "label": "column2",
           "name": "column2",
           "type": "text"
          },
          {
           "label": "column3",
           "name": "column3",
           "type": "text"
          },
          {
           "label": "column4",
           "name": "column4",
           "type": "text"
          },
          {
           "label": "column5",
           "name": "column5",
           "type": "text"
          },
          {
           "label": "column6",
           "name": "column6",
           "type": "column6"
          },
          {
           "label": "column7",
           "name": "column7",
           "type": "text"
          },
          {
           "label": "column8",
           "name": "column8",
           "type": "text"
          }
          ]
      } );

      var table = $('#table').DataTable( {
          lengthChange: false,
          ajax: "php/table.php",
          columns: [
          {
           "data": "column1"
          },
          {
           "data": "column2"
          },
          {
           "data": "column3"
          },
          {
           "data": "column4"
          },
          {
           "data": "column5"
          },
          {
           "data": "column6"
          },
          {
           "data": "column7"
          },
          {
           "data": "column8"
          },
          {
           "data": "column9"
          }
          ]
      } );

      var tableTools = new $.fn.dataTable.TableTools( table, {
          sRowSelect: "os",
          aButtons: [
              { sExtends: "editor_create", editor: editor },
              { sExtends: "editor_edit",   editor: editor },
              { sExtends: "editor_remove", editor: editor }
          ]
      } );
      $( tableTools.fnContainer() ).appendTo( '#table_wrapper .col-sm-6:eq(0)' );
  } );
  </script>
    </head>
    <body>
        <div class="container">
            <h1>
                Editor
            </h1>

            <table class="table table-bordered" id="table">
                <thead>
                    <tr>
      <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                        <th>Column 5</th>
                        <th>Column 6</th>
                        <th>Column 7</th>
                        <th>Column 8</th>
      <th>Column 9</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

Answers

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Sounds very odd! What happens on this example page for you in IE?

    Are you able to give me a link to the page you are working on?

    Thanks,
    Allan

  • markscottmarkscott Posts: 7Questions: 1Answers: 0
    edited April 2015

    Hi Allan

    That example works ok, strange.

    Here is a screenshot: http://picpaste.com/pics/Capture-7Q0f1SpA.1428569356.PNG

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Very odd. If you look in the console in IE does it show any error messages perhaps? Is the HTML valid (per the W3C validator)?

    Without a way to reproduce the issue I'm afraid I can only really guess at the moment!

    Allan

  • markscottmarkscott Posts: 7Questions: 1Answers: 0

    I'll check all your suggestions and report back. I have no problem showing you, but problem is this is an Internal site (LAN only) so it'll be some work to open it up. I'll reply when I've had a look :-)

  • markscottmarkscott Posts: 7Questions: 1Answers: 0
    edited April 2015

    The generator misses some tags in this:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

    Once I replaced the block with the above from the Bootstrap examples it works ok.

    I can't get date picker working in Internet Explorer though (again works ok in Google Chrome):

                    {
                 "label": "Date",
                 "name": "date",
                 "type": "date",
                 def: function () {
                  var d = new Date();
                  var pad = function ( i ) {
                   return i<9 ? '0'+i : i;
                  }
       
                  return d.getFullYear() +'-'+ pad(d.getUTCMonth()+1) +'-'+ pad(d.getUTCDate());
                  }
                }

    Screenshot in Internet Explorer: http://picpaste.com/pics/Capture-6m1chjF2.1428583394.PNG

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Sounds like you IE might be setup to render by default in an old version of the rendering engine. Good to hear you got it working though.

    Regarding the date input - have you included jQuery UI's date picker?

    Allan

  • markscottmarkscott Posts: 7Questions: 1Answers: 0
    edited April 2015

    I am using the same code (above) for both IE and Chrome. In Chrome I get a date picker http://picpaste.com/pics/Capture-PSHkXf5G.1428589783.PNG and in Internet Explorer I don't http://picpaste.com/pics/Capture-6m1chjF2.1428583394.PNG ?

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Are you using Generator's code unmodified? Are you able to show me a screenshot of your Generator configuration so I can try to reproduce the error?

    Allan

  • markscottmarkscott Posts: 7Questions: 1Answers: 0
    edited April 2015

    Yes using the generated code I have a date field in Chrome this automatically shows a date picker but in IE I just get a little sort-of broken text box as the screenshots ? I haven't included datepicker or anything since it worked without it in Chrome ... do I need it?

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    I don't see the jQuery UI library in your code above. Did you select the "Date (jQuery UI)" option for the column in Generator?

    Chrome has its own HTML5 date picker built-in. None of the other browsers currently support that, which is why Editor supports the jQuery UI date picker.

    I've just tried Generator with a date field and it appears to work as expected in IE. Are you able to show me a screenshot of your Generator configuration so I can try to reproduce the error?

    Allan

  • markscottmarkscott Posts: 7Questions: 1Answers: 0

    Included jQuery UI works. I didn't realise that Chrome had it built in, that explains a lot! Should I be able to just use Bootstrap date picker instead of jQuery UI?

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Sure. There are two different Bootstrap date picker plug-ins available for Editor: https://editor.datatables.net/plug-ins/field-type/ .

    I didn't realise that Chrome had it built in

    I really wish the other browsers would hurry up and implement it as well!

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.