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.
Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi, could you point us what to do on the page to reproduce as it is not in english.
0
Peter KromanSales ExecutiveAuthor Commented:
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.
0
lenamtlCommented:
If I check the console for errors I see this
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

Open in new window


You don't seems to use Datatables server side method, so this mean that you use a custom method to generate the table and the results .

To investigate:
If the result show only items that don't have (sub item) no reponsive view +
the total is ok

To reproduce
select 1645  then select first item of each drop down

But even that message is not ok
Showing 1 to 2 of 2 entries

So you really need to redo the calculation custom code
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Peter KromanSales ExecutiveAuthor Commented:
I can not reproduce the error you show in my console.

How do you get that?
0
lenamtlCommented:
On page load, using chrome dev tool (right click Inspect) check the console
0
Peter KromanSales ExecutiveAuthor Commented:
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 :)
0
Chris StanyonWebDevCommented:
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.
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Chris,

I'll look into it a little later and get back - I am just heading out right now.
0
Peter KromanSales ExecutiveAuthor Commented:
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

0
Chris StanyonWebDevCommented:
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.
0
Peter KromanSales ExecutiveAuthor Commented:
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.
0
Peter KromanSales ExecutiveAuthor Commented:
Toggle js is here:
        /* Toggle Master/Child */
        $('#FtKTable').on('click', '.ftMaster', function() {
        $(this).nextAll('.ftChild').toggle();
        });

Open in new window

0
Chris StanyonWebDevCommented:
Ahh ... OK Peter,

We originally used the <tbody> wrappers to group the relevant children into a block, so we could toggle them. That obviously breaks the DataTable.

Now we've removed the <tbody> we need to change the toggle code slightly. Instead of the call to nextAll, we need to use a call to nextUntil:

$(this).nextUntil('.ftMaster', '.ftChild').toggle();

This will now only toggle the child records upto the next master record.

Give that a go, and it should solve the problem.

Doesn't address the previous problem I mentioned - orphaned children will be hidden with no way to toggle them back on.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor Commented:
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.
0
Peter KromanSales ExecutiveAuthor Commented:
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?
0
Chris StanyonWebDevCommented:
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.
0
lenamtlCommented:
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 ...
0
Peter KromanSales ExecutiveAuthor Commented:
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 :)
0
Peter KromanSales ExecutiveAuthor Commented:
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.
0
Chris StanyonWebDevCommented:
OK. No worries then :)
0
Peter KromanSales ExecutiveAuthor Commented:
Tahnks lenmati,

Very good points you have supplied. Thanks for that.
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Chris,

You have done it again. Your patience can only impress :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.