Twitter Bootstrap - Page 2

Twitter Bootstrap

24

Replies

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    @markjo: It looks like you've solved it from that link and I've added a comment as well. Please don't cross post the same question. It just takes up time so I have less time to answer questions :-)

    Allan
  • markjomarkjo Posts: 66Questions: 0Answers: 0
    @Allan I supposed it would be bootstrap related issue, but i have found out that it's not bootstra specific :)
    Thank you for interest.
  • sevagsevag Posts: 1Questions: 0Answers: 0
    Hello Allan i'm kind of a newbie to web programming and I have a question concerning the implementation of your data table to my bootstrap web app. Currently I am using bootstrap's table and have this format:

    mysql_fetch_row

    while($row)
    {
    $id=$row[0];
    $name=$row[1];
    phonenumber=$row[2];

    '

    id
    name
    phone number



    '.$id.'
    '.$name.'
    '.$phonenumber.'



    }

    but when I implement your scripts it gives me some errors and doesn't work (obviously im pulling a very silly mistake) .

    Thank you,
    Sevag
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Are you not getting a number of PHP errors from that script? There is no each and a number of quoting syntax errors. Having said that, this is not a PHP forum so you might be better off asking somewhere that is. Basically the thing to do is to get your script outputting an HTML table first and then add DataTables.

    Allan
  • adoggadogg Posts: 1Questions: 0Answers: 0
    edited June 2012
    Hi, Allan.

    I have a couple of problems using DataTable + Twitter Bootstrap when putting it not just inside but inside of a little bit more complex layout:

    [code]


    ....

    ...

    [/code]

    First problem is that with this layout "records per page" controls are placed at the top of the grid: http://sdrv.ms/MtfWTc

    Second problem is when plugin is initialized with such code:
    [code]
    $(document).ready(function() {
    $('#example').dataTable( {
    "sDom": "<'row'<'span9'l><'span9'f>r>t<'row'<'span9'i><'span9'p>>",
    "bInfo": false,
    "sScrollX": "100%",
    "sScrollY": "500px",
    "sPaginationType": "bootstrap",
    "bPaginate": false,
    "oLanguage": {
    "sLengthMenu": "_MENU_ records per page"
    }
    } );
    } );
    [/code]

    then some space appears between table header and a body: http://sdrv.ms/LDlOIv And it's enough sScrollX or sScrollY to be in the initialization to have this issue.

    I'm using css and js files downloaded from the example of DataTable and Twitter Bootstrap provided by you. Full page layout is here: http://sdrv.ms/LDm0Y5

    Thanks.

    P.S.: I'm completely new to web development so maybe I'm doing something wrong...
  • pmechelonpmechelon Posts: 3Questions: 0Answers: 0
    Hi Allan:

    Worked great to paginate and filter 100s of records in my table. Awesome Work !! This is exactly what I was looking for in my Twitter Bootstrap based web application.

    Thanks!
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Fantastic - good to hear :-)

    Allan
  • pmechelonpmechelon Posts: 3Questions: 0Answers: 0
    Hi Allan:

    So, I hit across one issue on integrating datatables with my bootstrap based application. My table data uses other bootstrap javascript plugins like popovers (http://twitter.github.com/bootstrap/javascript.html) and iphone style checkboxes (http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html).

    The issue and probably a blocker for me is, on applying the pagination, the first page loads all this JS plugins properly, however all these JS plugins gets disabled on all the subsequent pages.

    Would really appreciate your help and would a big win if you can suggest a way to make datatables working end to end with other JS plugins in all the pages.

    Thanks!
    -Hiten
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Hi Hiten,

    This is covered in the top FAQ: http://datatables.net/faqs#events :-). Basically you need to either initialise the other plug-ins first, or have them use live or delegate event handlers (this latter option is the best - but it might mean changing the code of the plug-ins).

    Allan
  • pmechelonpmechelon Posts: 3Questions: 0Answers: 0
    Super!! Worked like a breeze, including third-party plugins. I went for the preinitialization approach for now. Thanks a bunch for your quick response and help. This is awesome!!
  • jkensukejkensuke Posts: 3Questions: 0Answers: 0
    Okay so I found your demo to be fantastic and exactly what I was looking for. However I admit it I'm better at back end scripting then front end layout / design however I'm trying to learn. I'm experimenting with bootstrap 2.0 for my front end layout and I'm having trouble integrating your demo into it.

    I'm using your updated code but when I put it into my default template it doesn't show the table sort options or the pagination or the search box to filter. I'm sure the is a confict with something in your code not working with something in my own (which I admit is just the default templates hacked together by me).

    I put the two pages side by side in this demo:

    http://whitefeatherphoto.com/demo/demo.cfm

    That page is just your code but hosted on my site (yes I know I'm linking to your resources but that is just for this demo period till I figure out what is wrong. Once this get's figured out I'll copy the files to my own host).

    Then I take your code and put it in my page template and again the table shows up fine but all the extra options stop working.

    Any help you can offer about what I'm doing wrong would be appreciated.

    Thanks,
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    If you look at the console in your browser you will see:

    > TypeError: 'undefined' is not a function (evaluating '$('#example').dataTable')

    Simple reason is that you are loading jQuery twice:

    [code]



    [/code]

    and the second one overwrites the first.

    Btw - I wouldn't use DataTables.net as a CDN like that. It is not designed to be and the path names could change in future. DataTables is available on the Microsoft Ajax CDN which is an excellent CDN network: http://datatables.net/blog/Microsoft_CDN .

    Allan
  • jkensukejkensuke Posts: 3Questions: 0Answers: 0
    edited July 2012
    Thanks Allan for your quick help on this.

    I thought that might have been the case but I tried by taking our the jquery.js from your code not from my own. I figured that it was the same but something in yours seems to be necessary where as something in mine seems to be missing.

    As for the CDN I was just going to host on my own site rather then external links form another site. I just left the code as it was to help you spot yours versus mine.

    Thanks again,
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    You need to load the files in sequence - DataTables depends on jQuery, so you need to load jQuery before DataTables. One option would just be to load DataTables at the end of your document.

    Allan
  • jkensukejkensuke Posts: 3Questions: 0Answers: 0
    edited July 2012
    .... Oh excuse me...



    Thanks for clarifying that. This is what happens when I stare at code too long. I will remember that next time and now I think you also fixed another problem I had with a different jquery product I was trying to integrate.
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Heh - no worries. Good to hear you got it working.

    Allan
  • gt62gt62 Posts: 6Questions: 0Answers: 0
    Hi all,

    For a project, I need to use bootstrap and datatables but I meet problems :
    - there is a conflict between the jquery of bootstrap and the jquery of datatables : the display of "aButtons" does not.
    - when I remove jquery of bootstrap, the display of "aButtons" does but saving the table is impossible.

    Someone he solutions?

    Thanks in advance,
    Gauthier
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Are you including jquery twice? Which version are you using?

    Allan
  • gt62gt62 Posts: 6Questions: 0Answers: 0
    Thanks Allan. Indeed, I include jquery twice.

    Gauthier
  • hamerwhamerw Posts: 1Questions: 0Answers: 0
    Hello
    Thanks for the great plugin. It's the best one out there!
    I used a previous version of datatables.. before I started into twitter bootstrap. I followed the instructions and have the tables sorting and even have all the sort_buttons working. But I also had a nice little feature to not sort selected columns and hide the sort image.
    eg.
    [code]
    var dontSort = [];
    $('#myTable thead th').each( function () {
    if ( $(this).hasClass( 'no_sort' )) {
    dontSort.push( { "bSortable": false } );
    } else {
    dontSort.push( null );
    }
    });
    $('#myTable').dataTable({
    "aoColumns": dontSort,
    "sPaginationType": "full_numbers"
    });
    [/code]

    Now this does not work and I get the following error.

    DataTables warning (table id = 'myTable'); Cannot reinitialize DataTable.
    To retrieve the DataTables objst for this table, pass no arguments or see the docs for bRetrieve and bDestroy.

    While it is not really important I thought it was nice to hide the sort images and not sort certain columns. Can you think of an easy way to fix this?

    Thanks
    Wayne
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Hi Wayne,

    Unfortunately the bSortable parameter cannot be changed dynamically after a DataTable has been initialised. You either need to destroy and the recreate the table ( bDestroy ) which is a fairly expensive process, or you need to add this feature to DataTables / work through the private "api" to manipulate the table into doing what you need.

    Sorry - no easy way to fix it properly.

    Allan
  • soulicesoulice Posts: 9Questions: 2Answers: 0
    edited October 2012
    Tied things into MVC3 with bootstrap. Had to refernce the datatable js from my partial view to get it to fire, but after that works great. Do have an odd styling issue. The top and bottom left (number of rows and page of page text are lefted outside of the containing space. Things come out as a div, then a table, then a div and the div go about 30 px to the left outside of the containing space.

    EDIT: never mind, got it. overwrote the bootstrap css for the .row inside my container to have no left margin.
    Great stuff!!!
  • jhfrenchjhfrench Posts: 15Questions: 0Answers: 0
    I notice DataTables use jQuery's ID selector:
    [code]$('#example').dataTable( ... );[/code]
    Why is this preferable to using jQuery's class selector:
    [code]$('.DataTable').dataTable( ... );[/code]
    ?
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    @jhfrench - Not sure how your question relates to the rest of this thread, but DataTables will work just fine with either selector. I use whichever is appropriate for the situation. For example this multiple tables example uses a class selector: http://datatables.net/release-datatables/examples/basic_init/multiple_tables.html .

    Allan
  • MeclipseMeclipse Posts: 1Questions: 0Answers: 0
    Hi,

    I'm using Twitter bootstrap, and i need to change the Search Control or Filter to the input-prend class and with another controls inside like a 'span' and 'i'. I made some changes on source code but i want to know if there is another way to do it with extensions or something.

    I changed in function _fnFeatureHtmlFilter
    after line [code]var oPreviousSearch = oSettings.oPreviousSearch;[/code]
    and before line [code]var nFilter = document.createElement('div');[/code]

    the following code:
    [code]
    var searchControl = '';
    var sSearchStr = oSettings.oLanguage.sSearch;

    if (oSettings.sPaginationType == "bootstrap") {
    var bootstrapSearchControl = '';
    searchControl = bootstrapSearchControl;
    sSearchStr = "";
    }

    sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
    sSearchStr.replace('_INPUT_', searchControl) :
    sSearchStr === "" ? searchControl : sSearchStr + searchControl;
    [/code]

    Thanks for your help.
    Best Regards,
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    That's probably the best way at the moment. 1.11 (latter half of this year) should introduce renderers which will make this kind of thing much easier.

    Allan
  • shamisshamis Posts: 1Questions: 0Answers: 0
    [code]sClass: "center"[/code]
    This is not working in the twitter bootstrap themed Datatables.
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Do you have a CSS class of center which has higher priority than any other style which would effect the text-alignment in the cell? I'd guess not.

    Allan
  • peter007peter007 Posts: 8Questions: 0Answers: 0
    I want to add sorting feature in Twitter bootstrap; I looked at:
    http://datatables.net/blog/Twitter_Bootstrap_2

    but I dont understand where to add the "Sorting" code, in which file?
    bootstrap.css or bootstrap.js or my .html file ??

    Also do I have to install Data tables or is it part of the Twitter bootstrap?

    Please let me know

    Thanks,

    _Peter
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    > Also do I have to install Data tables or is it part of the Twitter bootstrap?

    DataTables is a jQuery plug-in for adding interaction controls to HTML tables. It is not part of Twitter Bootstrap - you need to install DataTables. See: http://datatables.net/blog/Getting_started_with_DataTables%3A_First_steps

    Allan
This discussion has been closed.