How to add a check all function with checkboxes in columns

How to add a check all function with checkboxes in columns

adromiladromil Posts: 53Questions: 4Answers: 0
edited March 2012 in General
Hi,

I have encountered an issue on having a "check all" function on my dataTable.
I have noticed that on the 1st page when my shown entry = 10 the entries on the 11th onward returns a null HTML element and I could not set is property to change it from checked=false to checked= true and vice versa.
Can anyone have any inputs on this?
Thank you very much.

Replies

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Use the $ API method:

    [code]
    oTable.$('tr input').attr( 'checked', true );
    [/code]

    See also: http://datatables.net/faqs#events

    Allan
  • adromiladromil Posts: 53Questions: 4Answers: 0
    edited March 2012
    Thanks Allan for you prompt reply.

    But I noticed also that my concept is not what I need.
    I figured out on checking only the visible rows, how ever when I tried to turn the pages, my "check all" input textbox is not changing its attribute, and leaving the checked inputs from the previous page I checked is still checked, I want only to apply the function on the visible or current page of the table.

    Have you done something like this before?
    Thanks in advanced.
  • adromiladromil Posts: 53Questions: 4Answers: 0
    Or rather is there any way I could determine that the paging buttons are clicked? so that I can check/uncheck the "check all" input checked=false.

    Thank you very much.
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Did you use my method above, or just a straight jQuery selector? DataTables removes elements from the page, thus a normal jQuery request will not work.

    Also if you are using server-side processing, then the other pages don't even exist yet, so that needs to be taken into account.

    Allan
  • adromiladromil Posts: 53Questions: 4Answers: 0
    Hi Allan,

    Thank you for your response.
    I am doing this with the code below, since I am not using server-side processing
    I am using this where i = number of total records all in all.
    [code]$( "input[id=chkDel"+i+"]" ).attr('checked', true);[/code]

    If I am going to use server-side processing, I encountered issues setting the "check all" function using input checkbox (which does not checked the visible checkboxes).
    Or do you have any other suggestions in mind?

    Thank you very much.
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    And if you try the DataTables $ API method as I suggested above, does that work?:

    [code]
    table.$( "input[id=chkDel"+i+"]" ).attr('checked', true);
    [/code]

    Allan
  • adromiladromil Posts: 53Questions: 4Answers: 0
    Hi Allan,

    It worked, however, I noticed that when the page is changed, the "check all" checkbox is still checked though none of the checkboxes on the column is checked.

    Best regards
  • adromiladromil Posts: 53Questions: 4Answers: 0
    Hi Allan,

    To give you a better picture on this.
    I am trying to add a checkbox column to mark a row or entry to determine which to delete.
    and my delete button is only enabled whenever any of the checkbox is checked.

    Also, the reason I did not use server-side processing is because I have the 2nd column where I am displaying 3 fields from the database table, which I am extracting only the 1st character of the 3rd field.

    Regards
  • adromiladromil Posts: 53Questions: 4Answers: 0
    edited March 2012
    I also tried to use this code:
    [code]{"fnRender": function ( oObj ) {
    return ""+ oObj.aData[1] +', '+ oObj.aData[2] + ' ' + oObj.aData[3] +"";},
    "aTargets": [ 1 ]
    }[/code]

    But I cannot figure out how to have the checkbox inserted:
    What I used is the code below to have the checkboxes is:
    [code]
    [/code]

    Thank you very much
  • adromiladromil Posts: 53Questions: 4Answers: 0
    edited March 2012
    Hi,

    I've come up of a concept to achieve what I am working by using server-side processing, and use [code]
    {"fnRender": function (oObj) {
    return "";
    },
    "aTargets": [0]
    },
    [/code]
    However, I am having issue on getting the original value of id field since oObj.aData[0] is returning the rendered value :
    [code]
    BUSA, MELISSA GUARINO(data from db)
    [/code]

    Does any have can give me some inputs here?

    Thanks in advanced.
  • adromiladromil Posts: 53Questions: 4Answers: 0
    All I want to get is the value of the 1st field from the database to assign as the Id of my tag on the 2nd column.

    I appreciate your inputs.

    Thank you very much.
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Your fnRender approach looks fine, but you might want to consider using bUseRendered to stop DataTables from overwriting your data.

    Allan
  • adromiladromil Posts: 53Questions: 4Answers: 0
    edited March 2012
    Thank you very much Allan for your inputs,

    I am going to use this bUseRendered before my another fnRender.

    I appreciate that much.

    Best regards
This discussion has been closed.