Twitter Bootstrap - Page 3

Twitter Bootstrap

13

Replies

  • peter007peter007 Posts: 8Questions: 0Answers: 0
    edited January 2013
    Thanks for the post its working!
    But what if I dont want to include the last column for sorting (its a column for total data):

    also I would like to add "ALL" option in paging. Do you have anything for that?

    please check the code:

    Thank you for your time

    [code]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




    DataTables example

    <!-- -->












    Rendering engine
    Browser
    Platform(s)
    Engine version
    CSS grade




    Trident
    Internet
    Explorer 4.0
    Win 95+
    4
    X


    Trident
    Internet
    Explorer 5.0
    Win 95+
    5
    C


    Trident
    Internet
    Explorer 5.5
    Win 95+
    5.5
    A


    Trident
    Internet
    Explorer 6
    Win 98+
    6
    A


    Total
    Win = 4, Max =0
    4








    [/code]
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    > But what if I dont want to include the last column for sorting (its a column for total data):

    Use bSortable .

    > also I would like to add "ALL" option in paging. Do you have anything for that?

    Use aLengthMenu .

    Allan
  • peter007peter007 Posts: 8Questions: 0Answers: 0
    edited January 2013
    Thanks for the reply..

    [quote]allan said: Use aLengthMenu .[/quote]

    aLengthMenu is working!

    [quote]allan said: Use bSortable .[/quote]

    bSortable example is working for column(s),

    [code]
    $(document).ready( function() {
    $('#example').dataTable( {
    "aoColumnDefs": [
    { "bSortable": false, "aTargets": [ 0 ] }
    ] } );
    } );
    [/code]

    but I want to disable the last Row and data is dynamic so I dont know the amount of Rows

    do you have anything like "aoColumnDefs" for Rows

    I have also tried:
    (but its not working!)

    [code]

    Total

    Win = 4, Max =0
    4


    [/code]

    Please let me know if you have a solution..
    Thanks,

    _Peter
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    The last `row` (rather than column) ? There is no way to disable sorting for a single row. If you want it for the last column use `aTargets: [ -1 ]` (which counts from the right), but for a row to be fixed at the bottom of the table, you'd need to use a TFOOT element.

    Allan
  • peter007peter007 Posts: 8Questions: 0Answers: 0
    edited January 2013
    ok its working!

    So I just separated end row with (this way sorting doesn't work on it!); something like this:

    [code]



    Rendering engine
    Browser
    Platform(s)
    Engine version
    CSS grade




    Trident
    Internet
    Explorer 4.0
    Win 95+
    4
    X


    Trident
    Internet
    Explorer 5.0
    Win 95+
    5
    C




    Total

    Win = 4, Max =0
    4




    [/code]

    Thanks for all your help!

    cheers
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    Exactly :-). Good stuff.

    Allan
  • elimenceelimence Posts: 1Questions: 0Answers: 0
    Hi, i have not used datables before, but i do use twitter bootstrap. This example is really awesome and i have been trying to get something like this.

    I am confused as to how where to start off.
    Please send me step by step instructions on how to accomplish your example (not necessarily detailed).
    Thank you.
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    http://datatables.net/blog/Twitter_Bootstrap_2
  • darkhorndarkhorn Posts: 4Questions: 0Answers: 0
    edited February 2013
    deleted
  • pkachhiapkachhia Posts: 1Questions: 0Answers: 0
    Hi Allan,

    I am working on one web application where we have used only html, jquery and C code as backend. I have used twitter bootstrap into it. I want to load dynamic data using ajax into datatable, but the problem is datatable not initialize after complete the ajax request. Can you help me to get rid of it?

    Into my web page, I have send multiple ajax request to c page to get data in the bunch of 20 records as a string( json is not possible), and then I have split the string and make an array and display that array values into table. This part is done, but the pagination, search and number of records per page dropdown are not work as per given demo. I mean the table is work as normal table not datatable.
  • michahellmichahell Posts: 2Questions: 0Answers: 0
    Hi guys, awesome work on making datatables compatible with bootstrap. but, as allways, with GUI components, for whatever language there is, there are allways components missing which sometimes leads to frustration. in the case of bootstrap, for example, this component is missing by default:
    https://github.com/danielfarrell/bootstrap-combobox
    I'd love to know how to make the datatables 'records-per-page' box modifiable so it uses the
    bootstrap-combobox :)
  • michahellmichahell Posts: 2Questions: 0Answers: 0
    As an update, i came across https://github.com/danielfarrell/bootstrap-combobox and tried to implement it like this:

    setTimeout(function(){
    $('select[name="membertable_length"]').attr('class', 'combobox');
    // make it so.
    $('.combobox').combobox();
    }, 1000);

    The setTimeout is not a good way but this was just a quick test. However, i am getting the following error:

    Uncaught TypeError: Cannot read property 'webkit' of undefined

    I think it's related to the bootstrap-combobox requiring a plugin... Can anyone can reproduce this and let me know if you get an error?
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    Odds are it is using `$.browser` which is removed in jQuery 1.9. However, that would be something to take up with the combo box author.

    Allan
  • jpdonaghyjpdonaghy Posts: 4Questions: 0Answers: 0
    "bProcessing : true" doesn't seem to be working with bootstrap2. Anyone else have this issue?
  • mole1066mole1066 Posts: 7Questions: 0Answers: 0
    Hi,

    I am using datatables with bootstrap and mostly it is superb. The header and pagination styling all looks great. However, I still seem to have the purple styling on the stripes. How do I get thsi to be the cool grey?

    Michael
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    @Michael - Please link to a test case so I can give you an answer without guessing :-). I'm going to guess that you are including some of the default DataTables stylesheets. This isn't needed - you just need Bootstrap and the DataTables bootstrap integration file.

    Allan
  • lephuocvietlephuocviet Posts: 1Questions: 0Answers: 0
    edited April 2013
    [code]

    Section 1
    Section 2
    Section 3






    Section 2 content.


    Section 3 content


    [/code]

    When I added



    into



    The size of datatable is longer than . I think that there's a problem with .container in bootstrap.css, but I don't know way to fix it. If i remove class "container" in , the size of table is OK, but the "...records per page" and "Search" input is not in the same line.
  • mole1066mole1066 Posts: 7Questions: 0Answers: 0
    re: post on March 10.

    Somehow old dataTables code had found its way into public/assets/application.css. Removing that and the class="display" sorted things out
  • KbFwthoxvgXsKbFwthoxvgXs Posts: 8Questions: 0Answers: 0
    Hi Allan. First, thanks for the wonderful plugin.

    I am trying to use dataTables+bootstrap with "sScrollY" option. My styling for the table is

    .

    So, everything works except it looks a little ugly with this table-bordered style but I need it to split columns. Maybe you have some ideas how I can tweak DT_bootstrap.css to make it look more nicely. I assume the problem is that with "sScrollY" the table is split into two tables (headers and columns) and both have all bootstrap styles applied.
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    @KbFwthoxvgXs - are you using the latest integration files from here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap ? If so and it still isn't well styled, can you link us to the page please.

    Allan
  • KbFwthoxvgXsKbFwthoxvgXs Posts: 8Questions: 0Answers: 0
    Thanks. Using the latest files from github helped, now it looks better :-).

    Another little question. Is it possible for dataTable not to use the pagination but let the user to select the number of rows to be displayed. I plan to select the whole records via Ajax, so I do not need a pagination, but I still want to provide a selectbox for changing the amount of visible records.
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    > Another little question. Is it possible for dataTable not to use the pagination but let the user to select the number of rows to be displayed

    I don't really understand that I'm afraid. Surely if the records are limited, then they have to be paged? However, yes it is possible, just drop the paging control ( `p` ) from sDom .

    Allan
  • KbFwthoxvgXsKbFwthoxvgXs Posts: 8Questions: 0Answers: 0
    My question was so weird because when I put [code]"bPaginate": false[/code] it removed both the pagination control and a select with result sizes. Probably it is reasonable because they are related. But I needed the select, that's why was asking.
    Anyway, thank you very much for advice, I will try just dropping ( [code]p[/code] ) from sDom.
  • saidsaid Posts: 3Questions: 0Answers: 0
    FFFF
  • lamlam Posts: 2Questions: 0Answers: 0
    Hi.
    I recently tried twitter bootstrap and data tables and followed the instruction, but i was not able initialize data tables to work within multiple tabs of twitter-bootstrap. The data tables is visible only in the first tab. Can you help me with this problem?
    http://jsfiddle.net/lamtei/SZeTt/12/
  • sunday03sunday03 Posts: 2Questions: 0Answers: 0
    Hi guys, can i put bootstrap datatable and modal discussion here? i m facing a problem in using datatable and modal in one page. Before adding datatable in the page, my modal popup is working fine. But after adding datatable, modal popup does not appear any more. Anyone has encountered the problem before? Any help would be very thankful.
  • allanallan Posts: 57,701Questions: 1Answers: 9,195 Site admin
    Not sure - might be you need to use delegated events, but we'd need a link to a test case to know.

    Allan
  • sunday03sunday03 Posts: 2Questions: 0Answers: 0
    Solved the problem. :D I guess there is some css comfliction with . Need to go in-depth into the css file to know the exact cause. :)
  • shragerdshragerd Posts: 1Questions: 0Answers: 0
    I'm having a problem in that the sort (asc/desc) arrows are displaying underneath the header and is obscured from view. Can you help with that? Also, the row that says Show ## entries is shifted off to the left of the containing element (partially offscreen.) Any idea why that would be?
  • johnnyfjohnnyf Posts: 1Questions: 0Answers: 0
    Anyone got it working with Twitter Bootstrap 3, yet? Downloading the example and switching to bootstrap 3 causes the paging display to screw up.
This discussion has been closed.