在列表的顶部和底部进行两个页面导航

时间:2012-06-03 04:34:34

标签: jquery html internet-explorer

我正在创建一个简单的PHP页面,用于读取CSV文件内容并向用户显示一些选定列页面 目前,我正在阅读每一行并立即显示它。由于这种方法,我只知道读完整个文件后的总行数(也在文件中搜索)。 我想要的是在列表的顶部和底部显示两个页面导航。像这样:

Page 1 | 2 | 3 | 4


Field 1 | Field 2 | Field 3 | Field 4 | Field 5 .... | Field n

ROW1

行2

...

Rown


Page 1 | 2 | 3 | 4

在显示所有行,底页导航后,我使用了jquery函数:insertBefore将另一个页面navi插入到顶部。

问题是:

1)首页导航未在IE8中显示,但在按F5时显示(在FF,Chrome中工作)。

2)使用insertBefore函数,首页导航会在显示底部导航时突然弹出。它看起来不自然

有什么建议吗?

消息来源代码:

为简单起见,我重写了这两个简单的源文件 -FileList.php:列出所有csv文件
-DisplayInList.php:显示CSV文件内容

顺便说一下:我已经通过更改FileList.php中的jquery代码解决了这个问题

            FileList.php
            <?php
                    echo "<script type=\"text/javascript\">\n";
                    echo "$(document).ready(function(){\n";
                    echo "$('a[name=dlink]').click(function(e) {\n";
                    echo "    e.preventDefault();\n";
                    echo "    var href = $(this).attr('href');\n";
                    echo "    $.post('DisplayInList.php',{href:href}, function(response)\n";
                    echo "     list_window = window.open()\n";
                    echo "     list_window.document.write(response);\n";
                    echo "     list_window.focus();\n";
                    echo "     list_window.document.close();\n";
                    echo "    });\n";
                    echo " });\n";
                    echo "});\n";
                    echo "</script>\n";


                    //add CSV file link here
                    foreach($file_list as $f){
                        $display_name = "WHATEVER";
                        echo "<TR><TD><a name=\"dlink\" href=",pathinfo($f,PATHINFO_FILENAME),">",$disp_name,"</a></TD>\n";
                    }
            ?>

            DisplayInList.php

            <?php
                echo "<div id=\"paging_tag\"></div>\n";
                if (($handle = fopen($csv_file, "r")) !== FALSE){
                    $display_cnt = 0;
                    while (($line = fgetcsv($handle, 10000, ",")) !== FALSE){
                        $found = {Check search conditions};
                        if ( $found == true ){
                            $display_cnt++;
                            //Display line to client
                            echo "Selected fields of a csv line to user";
                        }
                    }
                    fclose($handle);
                }

                if ( $display_cnt > 0 ){
                    echo "<p id=\"paging\"><span>PREVIOUS</span> Page 1 | Page 2 | Page 3<span>NEXT</span></p>";
                }

                echo "<script type=\"text/javascript\">\n";
                echo "$('#paging')\n";
                echo "          .insertBefore('#paging_tag');\n";
                echo "</script>";
            ?>

1 个答案:

答案 0 :(得分:0)

使用js形成UI是优先级最低的方法。只要有可能使用serveride和HTML / CSS方法,就避免使用javascript。

我建议使用PHP,例如:

$pagerHtml = 'do some code here';
print $pagerHtml; //the first place on top
/*
...
output HTML between the two pager lines
...
*/
print $pagerHtml //the bottom pager line