SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with simple index() selection

    I have table where one column has a specific class. This column is different in each table. My goal is to get the index of the column with the class. This means if the 4th column in the table has the class I want the selector to return 3. If the 1st column has the class it should return 0.

    Code JavaScript:
    var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");

    This selector continues to output -1 meaning there is no matching text in the column. Any suggestions on what I can do to get this working?

    Thanks.
    Follow Me On Twitter: BryceRay

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    What does the var i stand for? And could you post a minimal example of a table please? Just the header and one or two rows (with bogus data if you like) will be fine.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i is the variable used to loop through multiple tables.

    Code JavaScript:
    <html>
    <body>
    <table class="dataTable">
    <thead>
    <tr>
    <th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
    </tr>
    </thead>
    <tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
    </table>
    <table class="dataTable">
    <thead>
    <tr>
    <th>Column 1</th><th>Column 2</th><th>Column 3</th><th class="dataTable-defaultSort">Column 4</th>
    </tr>
    </thead>
    <tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
    </table>
    <table class="dataTable">
    <thead>
    <tr>
    <th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
    </tr>
    </thead>
    <tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
    </table>
    <table class="dataTable">
    <thead>
    <tr>
    <th class="dataTable-defaultSort">Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th>
    </tr>
    </thead>
    <tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
    </table>
    <table class="dataTable">
    <thead>
    <tr>
    <th>Column 1</th><th>Column 2</th><th class="dataTable-defaultSort">Column 3</th><th>Column 4</th>
    </tr>
    </thead>
    <tbody><td>random content</td><td>random content</td><td>random content</td><td>random content</td></tbody>
    </table>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    renderDataTable(".dataTable");
     
    function renderDataTable(selector) {
    	var out = [];
    	var tables = jQuery(selector);
    	var sorting;
     
    	for ( var i=0, iLen=tables.length ; i<iLen ; i++ )
    	{
    		var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");
    		alert(defaultCol); //Alert foreach table - value should be the index of the column with the class dataTable-defaultSort
        }
    }
    </script>
    </body>
    </html>

    Output should be:
    alert: 2
    alert: 3
    alert: 2
    alert: 0
    alert: 2

    ---------------------

    UPDATE:

    Here is a slightly more complex solution to what I was trying to accomplish:
    Code JavaScript:
    function renderDataTable(selector) {
    	var out = [];
    	var tables = jQuery(selector);
    	var sorting;
     
    	for ( var i=0, iLen=tables.length ; i<iLen ; i++ )
    	{
    		//var defaultCol = jQuery('th', tables[i]).index(".dataTable-defaultSort");
    		var cols = jQuery('th', tables[i])
    		for(var x=0; x<cols.length;x++){
    			if(jQuery(cols[x]).hasClass("dataTable-defaultSort")) alert(x);
    		}
        }
    }
    Follow Me On Twitter: BryceRay

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    This works:

    Code javascript:
    tables.each( function() {
    	var defaultCol = $('th', this).index($('.dataTable-defaultSort', this));
    	console.log(defaultCol); //Alert foreach table - value should be the index of the column with the class dataTable-defaultSort
    });

    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •