Jump to content


Photo

Modifying tables on Add / Drop page via scripting


11 replies to this topic

#1 Squintz82

Squintz82

    Veteran

  • Members
  • PipPipPip
  • 52 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
  • 311 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
  • 52 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
  • 311 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
  • 311 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
  • 311 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
  • 52 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
  • 311 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
  • 52 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
  • 311 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
  • 52 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
  • 311 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.



Reply to this topic



  


2 user(s) are reading this topic

0 members, 2 guests, 0 anonymous users