Jump to content


Photo

Modifying tables on Add / Drop page via scripting


16 replies to this topic

#1 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 12 June 2018 - 07:45 AM

Hi all,

 

Has anyone tried implementing scripting to override how tables are handled on the add / drop screen? MFL uses extremely long data tables via hidden overflows within divs, which makes the page very slow and hard to modify. I've been looking for a plugin / script would allow for a lazy load or pagination approach to the player lists, and found this plugin https://www.datatables.net. Unfortunately I'm not great with jQuery, so I can't seem to get it to work well. I am able to initialize the script, but I can't seem to get much to work. 

 

Has anyone had any success with something like this?

 



#2 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 12 June 2018 - 12:08 PM

This seems like a good idea to implement. It looks like a fairly decent size project though, since the add/drop tables aren't in html format. It looks like the link you provided needs to have a thead tag included in the table. You might have to add that in with jquery before you can run the plugin. The way MFL has these pages set up is a bit sloppy, so it would be nice to implement something like this. 


Gridiron Tavern, the best IDP league available.

#3 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 12 June 2018 - 12:09 PM

This seems like a good idea to implement. It looks like a fairly decent size project though, since the add/drop tables aren't in html format. It looks like the link you provided needs to have a thead tag included in the table. You might have to add that in with jquery before you can run the plugin. The way MFL has these pages set up is a bit sloppy, so it would be nice to implement something like this. 

 

Good insight. I'd love to see if this would be possible.



#4 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 12 June 2018 - 01:00 PM


This seems like a good idea to implement. It looks like a fairly decent size project though, since the add/drop tables aren't in html format. It looks like the link you provided needs to have a thead tag included in the table. You might have to add that in with jquery before you can run the plugin. The way MFL has these pages set up is a bit sloppy, so it would be nice to implement something like this. 

 
Good insight. I'd love to see if this would be possible.

TOS or Habman could probably put something together pretty quickly for something like this. It would probably take me a week to hack something together.
Gridiron Tavern, the best IDP league available.

#5 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 13 June 2018 - 08:22 PM

Unfortunately, this isn't going to be a plug and play option. I got it to work, but it breaks each time you filter. It is going to need additional custom coding. I'll try to fart around with it some more to see what I can come up with.

Someone smarter than me would probably be better off hiding what MFL has and creating new tables based off of the available arrays on the page. I'm not smart enough for that.
Gridiron Tavern, the best IDP league available.

#6 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 14 June 2018 - 09:41 AM

Here's what I've come up with. I decided to simply hide MFL's filters to keep this working. That takes away some of the functionality to sort for what you are looking for, but this data table search box allows you to type in team abbreviations or position letters and basically does the same thing.

 

*Make sure to have a link to jquery

 

Header:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<style>
#body_add_drop form div:first-child {overflow:auto;width:auto!important;height:auto!important;}
#body_add_drop form .dataTables_wrapper {background:#fff;padding: 4px;}
#body_add_drop form .dataTables_wrapper th:first-child {min-width:130px;}
#body_add_drop form table.dataTable tbody td {padding: 8px 2px;}
</style>

 

Footer:

**This will only work if you modify the below code to have the same number of table header cells as MFL has columns.

-- For example, my league uses salaries, so a salary column is added in the add and drop tables. Simply take out this part of the code in the two spots below if your league does not have salaries: <th>Salary</th>

<script>
$(document).ready( function () {
    $('#body_add_drop form table table tr').has('a[href*="#picker_top"]').remove();
    $('#body_add_drop form table table tr').has('td:contains("Filter by: NFL")').remove();
    $('#body_add_drop #add').prepend('<thead><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Opp</th><th>WProj</th></tr></thead>');
    $('#body_add_drop #drop').prepend('<thead><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Roster</th><th>Opp</th><th>WProj</th></tr></thead>');
    $('#body_add_drop .pickerbox').DataTable();
} );
</script>

Gridiron Tavern, the best IDP league available.

#7 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 14 June 2018 - 09:50 AM

Awesome start, thanks!. Going to mess around with this a bit. Might use it for our league draft page as well



#8 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 14 June 2018 - 10:12 AM

This will add search boxes on the bottom of each column. Follow the same instructions as above.

 

Header:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<style>
#body_add_drop form div:first-child {overflow:auto;width:auto!important;height:auto!important;}
#body_add_drop form .dataTables_wrapper {background:#fff;padding: 4px;}
#body_add_drop form .dataTables_wrapper th:first-child {min-width:130px;}
#body_add_drop form table.dataTable tbody td {padding: 8px 2px;}
#body_add_drop form tfoot th {padding:1px!important;background:#eee;}
#body_add_drop form tfoot input {width: 90%;padding: 3px;box-sizing: border-box;}
</style> 

 

Footer:

<script>
$(document).ready( function () {
    $('#body_add_drop form table table tr').has('a[href*="#picker_top"]').remove();
    $('#body_add_drop form table table tr').has('td:contains("Filter by: NFL")').remove();
    $('#body_add_drop #add').prepend('<thead><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Opp</th><th>WProj</th></tr></thead>');
    $('#body_add_drop #drop').prepend('<thead><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Roster</th><th>Opp</th><th>WProj</th></tr></thead>');
    $('#body_add_drop #add tbody').after('<tfoot><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Opp</th><th>WProj</th></tr></tfoot>');
    $('#body_add_drop #drop tbody').after('<tfoot><tr><th>Name</th><th>Team</th><th>Pos</th><th>Bye</th><th>Salary</th><th>Inj</th><th>Roster</th><th>Opp</th><th>WProj</th></tr></tfoot>');
    $('#body_add_drop .pickerbox tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#body_add_drop .pickerbox').DataTable();
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

Gridiron Tavern, the best IDP league available.

#9 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 16 June 2018 - 05:08 AM

Have you tried using the scroller plugin? https://datatables.n...nsions/scroller

 

This would be idea, but I'm wondering how we can get the api script that loads the table for player data 



#10 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 16 June 2018 - 08:25 PM

Have you tried using the scroller plugin? https://datatables.n...nsions/scroller
 
This would be idea, but I'm wondering how we can get the api script that loads the table for player data 


I don't understand what that is
Gridiron Tavern, the best IDP league available.

#11 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 16 June 2018 - 08:26 PM


Have you tried using the scroller plugin? https://datatables.n...nsions/scroller
 
This would be idea, but I'm wondering how we can get the api script that loads the table for player data 

I don't understand what that is

It dynamically loads long data tables in sets as you scroll. Instead of loading every player in the database at once (which is horrific on mobile).

#12 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Denver

Posted 17 June 2018 - 07:56 AM




Have you tried using the scroller plugin? https://datatables.n...nsions/scroller
 
This would be idea, but I'm wondering how we can get the api script that loads the table for player data 

I don't understand what that is
It dynamically loads long data tables in sets as you scroll. Instead of loading every player in the database at once (which is horrific on mobile).
I would probably have to see an example to understand it. Are you trying to save on load time, or just display the data differently?
Gridiron Tavern, the best IDP league available.

#13 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,349 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 30 June 2018 - 06:31 PM

your not going to be able to lazy load the player boxes , they are dynamically added each time you filter so it will break

 

I hated the Add/Drop page , so I used jQuery to clone all the data , and rebuild the table to look good on desktop and mobile.

 

I actually did this for dozens of MFL pages , i removed all their HTML , inserted my own and made the layouts look better to my preference.

 

I just wrapped the pagebody in my header , hid everything with css , then show it using jquery in the footer after the page has loaded , so everything loads smooth and no jumpiness

 

This helped the appearance of page loading for the site tremendously for the use of all Habmans scripts , no jumpy loads , displays perfectly

 

 

Desktop

1.jpg

 

Mobile

2.jpg


FREE Player Cuts Collection
http://www.nitrograf...nfl-playercuts/

#14 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 55 posts

Posted 01 July 2018 - 07:00 AM

your not going to be able to lazy load the player boxes , they are dynamically added each time you filter so it will break
 
I hated the Add/Drop page , so I used jQuery to clone all the data , and rebuild the table to look good on desktop and mobile.
 
I actually did this for dozens of MFL pages , i removed all their HTML , inserted my own and made the layouts look better to my preference.
 
I just wrapped the pagebody in my header , hid everything with css , then show it using jquery in the footer after the page has loaded , so everything loads smooth and no jumpiness
 
This helped the appearance of page loading for the site tremendously for the use of all Habmans scripts , no jumpy loads , displays perfectly
 
 
Desktop
1.jpg
 
Mobile
2.jpg


Great idea. Would you mind sharing the code for this? Or is this included in any templates?

#15 DA-G-GURU

DA-G-GURU

    Veteran

  • Members
  • PipPipPip
  • 1,101 posts
  • Gender:Male
  • Location:DAGrafixDesigns.com

Posted 01 July 2018 - 10:18 AM

Paul it is the same code that is on this demo link, which appears to be your demo from 2017?

 

http://www65.myfanta...17/home/74778#0

 

If your asking for only this code, you would have to strip it out of the 2 JS files global header and global footer, and even then i am not sure if that is doable.

 

TOS is swamped and this is mostly an after though now for him, but it is the same code as above as far as i can tell.


Simply The Best in Grafix and CSS webdesign since 2005

www.dagrafixdesigns.com

---------------
Twitter @DA_Sticks



Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users