没有弹出窗口显示分页表

时间:2016-11-09 09:39:38

标签: javascript php jquery pagination

我有分页表和输入字段。我想允许用户创建新进程。创建的表允许用户查看已存在的进程。 hmtl代码:

<div class="inner">
<center><table class="paginated">
    <?php
        $result = getProcessData();

        if (mysqli_num_rows($result) > 0)
        {
            echo '
            <thead>
                <tr>
                    <th>Process</th>
                    <th>Created By</th>
                </tr>
            </thead>';                      
        }
            $count = 0;
        if (mysqli_num_rows($result) > 0)
            while($row = mysqli_fetch_array($result))
            {   
                    $process = $row['theme_name'];
                    $createdBy = $row['createby'];

            echo '
            <tbody>
                <tr valign="top">
                    <td>' .$process. '</td>
                    <td>' .$createdBy. '</td>
                </tr>
            </tbody>';

            $count++;
            }       
    ?>
    </table></center>       
    <form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
            <?php
                $res = verifyFormFields();
            ?>
                        <!-- Username field -->
                <input type="text" class="input name" placeholder="Process name (required)" name="process" required/> 
                <!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->

                <center><input type="submit" class="button small" name="submit" value="Create Process"/></center>

                <div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
                    <h2 id="modalTitle">Success!</h2>
                    <div>
                        <div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
                        <div class="right">
                            <a href="#" id="closebtn" onclick="popUpNo()" class="button">Ok</a>
                        </div>
                    </div>
                </div>
            <?php   
                if($count == 1) 
                {                               
                    if($res=="")
                    { 
                        registerProcess();
                        echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
                    }
                    else{
                        echo "
                            <a style='color:red';> 
                                $res
                                </a>
                                ";
                        }
                }
            ?>                  
</form>
</div>

我验证字段和插入过程到数据库中:

function registerProcess(){
    $con = mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD, DATABASE_NAME);
    global $process;
    // To protect MySQL injection (more detail about MySQL injection)
    $process = cleanInputData($process);
    $process = mysqli_real_escape_string($con, $process);

    //query result
    $result = insertNewProcess(NULL,$process,$_SESSION['login_user'],1);
    // Check result
    if (!$result) {
        $msg2= "Process is already added. You cannot add same process twice!";
        echo $msg2;
        die('Invalid queryyyy: ' . mysqli_error($con));
    }
    // the message
    $msg = "Process is added!";

    // use wordwrap() if lines are longer than 70 characters
    echo "<script>var registerStr = 'Process Is Added';</script>";      
    //echo "<meta http-equiv='refresh' content='0'>";
}

function verifyFormFields(){
    global $process;

    if(empty($process)){
        return "<p id ='err'>Please Input Process</p>";
    }

    else return "";
}

此外,我使用javascript调用弹出窗口并使表格分页:

<script type="text/javascript">
    (function() {
        $(document).foundation();
    });
    function callShowAlert()
    {
        $('#registerModal').foundation('reveal', 'open');
    }
    function popUpNo()
    {
        $('#registerModal').foundation('reveal', 'close');
        location.href = 'process.php';
    }
    var testVal = 0;
</script>

<script>
    $(document).ready(function() {
        $('table.paginated').each(function() {
            var currentPage = 0;
            var numPerPage = 5;
            var $table = $(this);
            $table.bind('repaginate', function() {
                $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
            });
            $table.trigger('repaginate');
            var numRows = $table.find('tbody tr').length;
            var numPages = Math.ceil(numRows / numPerPage);
            var $pager = $('<div class="pager"></div>');
            for (var page = 0; page < numPages; page++) {
                $('<span class="page-number"></span>').text(page + 1).bind('click', {
                    newPage: page
                }, function(event) {
                    currentPage = event.data['newPage'];
                    $table.trigger('repaginate');
                    $(this).addClass('active').siblings().removeClass('active');
                }).appendTo($pager).addClass('clickable');
            }
            $pager.insertBefore($table).find('span.page-number:first').addClass('active');
        });
    } );    
</script>

它工作正常,我有弹出窗口和系统插入记录到数据库但只有只有输入字段和提交按钮。当我放桌子它不起作用。系统不会重新加载,也不会将记录插入数据库。为什么呢?

1 个答案:

答案 0 :(得分:0)

所以我通过简单地将表格放在表格后解决了这个问题:

<div class="inner">    
<form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
        <?php
            $res = verifyFormFields();
        ?>
                    <!-- Username field -->
            <input type="text" class="input name" placeholder="Process name (required)" name="process" required/> 
            <!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->

            <center><input type="submit" class="button small" name="submit" value="Create Process"/></center>

            <div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
                <h2 id="modalTitle">Success!</h2>
                <div>
                    <div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
                    <div class="right">
                        <a href="#" id="closebtn" onclick="popUpNo()" class="button">Ok</a>
                    </div>
                </div>
            </div>
        <?php   
            if($count == 1) 
            {                               
                if($res=="")
                { 
                    registerProcess();
                    echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
                }
                else{
                    echo "
                        <a style='color:red';> 
                            $res
                            </a>
                            ";
                    }
            }
        ?>                  
</form>
<center><table class="paginated">
<?php
    $result = getProcessData();

    if (mysqli_num_rows($result) > 0)
    {
        echo '
        <thead>
            <tr>
                <th>Process</th>
                <th>Created By</th>
            </tr>
        </thead>';                      
    }
        $count = 0;
    if (mysqli_num_rows($result) > 0)
        while($row = mysqli_fetch_array($result))
        {   
                $process = $row['theme_name'];
                $createdBy = $row['createby'];

        echo '
        <tbody>
            <tr valign="top">
                <td>' .$process. '</td>
                <td>' .$createdBy. '</td>
            </tr>
        </tbody>';

        $count++;
        }       
?>
</table></center>  
</div>

所以当我得到它时,表之前无法更新。