asked on

Info- and Search block of a DataTable is not working correctly

Hi,

I have this page:
https://kroweb.dk/gfdev/arkivalier/ft_6/

I use a DataTable on the page to present search results.
At the top-left of the DataTable I am showing the Info block and at the top-right the Search block.
My problem is that both blocks are mis-functioning in a strange random-like way.

The Info block counts wrong - sometimes it says 1 of 1 entries when there are 200 entries and sometime it says 12 of 12 entries when there are 47 entries. It looks a little like it is random what it says.
The searchblock is not reducing the results according to text entered in the Search field. I t also seems a little random what it actually do.

I Have DataTable working on many of my other pages without any problems, and I can't figure out what is wrong here.

I have this code in the head of my main file:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="../../templates/template_style.css"> 
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
    
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">


        $(document).ready(function() {

        /* Initialize the DataTable */    
        $('#FtKTable').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
 
        /* Toggle Master/Child */
        $('#FtKTable').on('click', '.ftMaster', function() {
        $(this).nextAll('.ftChild').toggle();
        });

        $('#searchResults').show();

});
</script>

Open in new window

If anybody can see what I am missing here I would be most grateful.

lenamtl

Hi, could you point us what to do on the page to reproduce as it is not in english.

Peter Kroman

ASKER

Yes of course. Sorry.

1. In the Type box choose "Søg i Købstæder" and in the "Vælg et aar" box chose 1925 and click "Søg".

It says 47 of 47 entries which is obviously wrong - there are about twice as many entries.

2. Try to write "Svaneke" in the search field, and you will se that the first line in the table shows "No matching records found", and nothing else happens.

SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Kroman

ASKER

I can not reproduce the error you show in my console.

How do you get that?

lenamtl

On page load, using chrome dev tool (right click Inspect) check the console

Peter Kroman

ASKER

Right. Doesn't show i Firefox :)

Anayway - this was a typo in the viewport meta content line. It makes no difference to the Data Table when I correct that.

I'm working on :)

Chris Stanyon

Hey Peter,

The HTML being used for your table is slightly incorrect. It contains quite a few <tbody> tags which is messing up the DataTable().

When you do the initial searched based on your previous criteria, it returns 6,026 rows. Your HTML has a <tbody> after the 47th row (plus a lot more), so that's where the count of 47 is coming from. Remove all the <tbody> tags, except for the very first - there should only be one that wraps all your rows.

That should also sort out the Search problem.

Your functionality will however introduce another problem. When you search for 'Svaneke' it filters the list to 40 records. Because of your parent/child setup, some of these records won't show because they are children. The search has filtered out the relevant parent, so there is no way to toggle the child visibility.

Peter Kroman

ASKER

Thanks Chris,

I'll look into it a little later and get back - I am just heading out right now.

Peter Kroman

ASKER

I can se that in the HTML generated, but in my code i actually only have one openening <tbody> tag and one closing </tbody> tag.

See the code that generates the table here:

<?php foreach ($data as $record): ?>

    <?php if ($record->type == RecordTypes::ftMaster): // We have a parent record ?>

    <tbody>

    <?php $showChildren = true; ?>

    <?php if(count($record->children) > '1'): ?>

        <?php $showChildren = false; ?>

        <tr class="<?php echo $record->type ?>">
           <td><i class="fa fa-plus-circle text-primary" aria-hidden="true" style="color: cornflowerblue; font-size: 18px; cursor: pointer"></i></td>
           <td><?php echo $record->amtherredsogngade ?></td>
           <td><?php echo $record->sogn ?></td>
           <td><?php echo $record->amt ?></td>
           <td><?php echo $record->aar ?></td>
           <td><?php echo $record->mytype ?></td>
       </tr>

    <?php endif; ?>

    <?php foreach ($record->children as $child): // Let's deal with the children! ?>

       <tr class="<?php echo $child->type ?> <?php echo $showChildren ? "showChild" : "" ?>">
            <td>&nbsp;</td>
            <td><?php echo $child->link ?></td>
            <td><?php echo $child->link2 ?></td>
            <td><?php echo $child->amt ?></td>
            <td><?php echo $child->aar ?></td>
            <td><?php echo $child->mytype ?></td>
        </tr>

    <?php endforeach; ?>


<?php else: // and finally the Orphaned records ?>

    <tr class="<?php echo $record->type ?>">
        <td>&nbsp;</td>
        <!-- <td><?php //echo $record->id ?></td> -->
        <td><?php echo $record->link ?></td>
        <td><?php echo $record->link2 ?></td>
        <td><?php echo $record->amt ?></td>
        <td><?php echo $record->aar ?></td>
        <td><?php echo $record->mytype ?></td>
 
    </tr>

    <?php endif; ?>

    <?php endforeach; ?>

    </tbody>

Open in new window

Chris Stanyon

That opening <tbody> is in a foreach loop, so it will be generated each time there's an ftMaster record. There should only be one <tbody> before the loop and one closing </tbody> after it.

Peter Kroman

ASKER

If I mov the opening <tbody> tag 2 lines upwards I get the Count (info) and the Search right but then the toggle fails.
When toggling a parent it opens all the children visible, and not jut it's own children.

Peter Kroman

ASKER

Toggle js is here:

        /* Toggle Master/Child */
        $('#FtKTable').on('click', '.ftMaster', function() {
        $(this).nextAll('.ftChild').toggle();
        });

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Kroman

ASKER

Yeaahh :)

It seems that the other problem you mention is solved too now.

Try to make a search string "Svan%" and choose 1860 in "Vælg et År".

This returns - as I see it - 12 entries including parents, children, and orphans.

Peter Kroman

ASKER

But just for my curiosity - why is that the HTML is generating a lot of empty lines between the opening <tbody> tag and the first opening <tr> tag?

Chris Stanyon

Those empty lines will just be because of the layout in your PHP files.

If we look at this:

<?php foreach ($data as $record): ?>

    <?php if ($record->type == RecordTypes::ftMaster): // We have a parent record ?>

    <tbody>

    <?php $showChildren = true; ?>

    <?php if(count($record->children) > '1'): ?>

        <?php $showChildren = false; ?>

        <tr class="<?php echo $record->type ?>">

Open in new window

All those blank lines are within the HTML block, not the PHP block, so they will be rendered as blank lines. Personally, I don't tend to worry too much about it - readability is more important when your coding, than what your generated HTML looks like.

As for the other problem I mentioned - it's still there! Do a Search for Svan / 1860 and then filter the search with Svanegade. This shows there should be 4 records, but all 4 records are ftChildren records so are set to display:none. There is no parent after you've filtered, so nothing to click on to fire the toggle event.

lenamtl

You can use this Datatables methods for child-row
https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html

The problem with custom code is that your toggle may get conflict with the Datatables responsive toggle ...

Peter Kroman

ASKER

Thanks lenmati,

I believe we have got it working just fine now.
We did choose to make this toggle function custom made because it fitted the actual needs best at the time.
But thanks for the hint anyway :)

Peter Kroman

ASKER

Thanks Chris,

I see your point. But I believe that this is actually no real problem for the users.

When using the DataTable Search function the user want to narrow the search down to find the right link to get to the right source. Then the user is in fact finished using this page for now. The next time he needs to use this page he will most often make a whole new search anyway because it typically will be something else he is looking for.

Chris Stanyon

OK. No worries then :)

Peter Kroman

ASKER

Tahnks lenmati,

Very good points you have supplied. Thanks for that.

Peter Kroman

ASKER

Thanks Chris,

You have done it again. Your patience can only impress :)