Datatables and bootstrap

dcnaren

Can anyone direct me to help/examples on the following please

1. Datatable used along with bootStrap style. How to use col-- style for columns. The data is being loaded using JSON array of objects.
2. In the same table, using Textbox for column level search. I am able to search, as soon as I use textbox with form-control style all column with are equally sized.

regards

allan

How to use col-- style for columns

Is that a Bootstrap class? Use columns.className if so.

For 2 we'd need a link to the page showing the issue.

Allan

dcnaren

Thanks the columns.className works. But when I include <input> textbox in header, the width has a problem. Is there no file upload in this form? I am pasting the sample code here

      <div class="container">
        <table class="table" id="example">
        <thead>
               <tr>
              <td><input type="text"></td>
               <td><input type="text"></td>
               <td><input type="text" ></td>
               <td><input type="text" ></td>
               <td><input type="text" ></td>
            </tr>
             <tr>
                 
              <td>A</td>
               <td>B</td>
               <td>C</td>
               <td>D</td>
               <td>E</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
      
      </table>
      </div>

          $(function(){
   $("#example").DataTable({
       dom:"<'row'<'col-md-6'l><'col-md-6'f>><'row'<'col-md-12'tr>><'row'<'col-md-5'i><'col-md-7'p>>",
       data:sampleData,
       columns: [
           {"data":"A",className:"col-md-4"},
           {"data":"B",className:"col-md-1"},
           {"data":"C",className:"col-md-1"},
           {"data":"D",className:"col-md-1"},
           {"data":"E",className:"col-md-4"},
       ]
   }); 
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You probably need to include some CSS to specify what width you want the input to take. Without a test case there isn't much help I can offer there though.

Joyrex

Not quite sure why you are wanting to put Bootstrap's col- styles on table elements - the col- styles are for Bootstrap's grid system: http://getbootstrap.com/css/#grid

Perhaps a static mockup of what you want the end result to look like would help in understanding better what the goal is here.