在 datatable 中自定义数据添加弹出框

1. js 代码

/* 这个点击可以长时间有效 */
$('#myTable tbody').on("click", "i[data-toggle='ykenan']", function () {
		
	/* 得到 datatable 的总行数 */
	var recordsTotal = $myTable.DataTable().page.info().recordsTotal;
	/* 得到 datatable 的全部数据 */
	var fnGetData = $myTable.dataTable().fnGetData();

	/* 得到点击时候的 table 表格的第几行 */
    var table_x = $(this).parents("td").parent().parent().find("tr").index($(this).parents("td").parent()[0]);
	/* 得到点击时候的 table 表格的第几列 */
    var table_y = $(this).parents("td").index();

	/* 得到点击时候的返回数据加载到 datatable 中真正数据的第几行 */
    var index_x = $myTable.DataTable().row($(this).parents("td").parents("tr")).index();
	/* 得到点击时候的返回数据加载到 datatable 中真正数据的第几列 */
    var index_y = $myTable.DataTable().column($(this).parents("td")).index();

	/* 查看 table 和数据索引的关系, 这个用来解决排序导致 table 中的索引和真实数据中的索引不一样的问题 */
    console.log("table: " + table_x + "," + table_y + ";" + "data: " + index_x + "," + index_y + ";");

    var $_span = $(this).parents("td").children("span");
    /* 判断是否添加条件, 根据实际情况写 */
    if ($_span.length === 1) {
        /* 得到点击需要的 i 标签 */
        var $i = $(this);
        /* 对 $i 添加父标签 */
        $i.wrap("<span></span>");
        /* 设置 $i 父标签的属性 */
        $i.parents("span").attr("style", "position: relative;");
        /* 在 $i 后面添加标签, 一边存放内容 */
        $i.after("<span></span>");
        /* 得到添加 $i 后面的标签来存放内容 */
        var $i1 = $(this).parents("td").children("span").children("span");
        /* 先设置 $i1 的标签的属性以便于得到高度数据 */
        $i1.attr("style", "position: absolute;padding: 5px 20px;width: max-content;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;max-width: 500px;");
        /* 添加内容, 这样才会有高度 */
        // $i1.html($myTable.DataTable().column(index_y).data()[index_x]);

		/* 添加需要弹出框的列的数据 */
        if(index_y === 1) {
            $i1.html(fnGetData[index_x].one);
        } else if(index_y === 2) {
            $i1.html(fnGetData[index_x].two);
        } else if(index_y === 3) {
            $i1.html(fnGetData[index_x].three);
        } else if(index_y === 4) {
            $i1.html(fnGetData[index_x].four);
        } else if(index_y === 5) {
            $i1.html(fnGetData[index_x].five);
        } else if(index_y === 6) {
            $i1.html(fnGetData[index_x].six);
        } else if(index_y === 7) {
            $i1.html(fnGetData[index_x].seven);
        }

        /* 得到该页的第几个分页, 索引从 0 开始 */
        var page = $myTable.DataTable().page.info().page;
        /* 得到分页的总页数 */
        var pages = $myTable.DataTable().page.info().pages;

        if(page !== pages - 1) {
            /* 判断高度进行设置从设属性 y = 381 - 30(x), y = 381 - 30(11 - x) */
            if (table_x <= 5) {
                /* 上面向下显示 */
                var height_one = 381 - 25 * table_x;
                /* 自动显示高度 */
                if ($i1.height() <= height_one) {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    }
                } else {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_one + "px;overflow-y: auto;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_one + "px;overflow-y: auto;");
                    }
                }
            } else {
                /* 下面向上显示 */
                var height_two = 381 - 25 * (11 - table_x);
                /* 自动显示高度 */
                if ($i1.height() <= height_two) {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                    }
                } else {
                    if (index_y < 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_two + "px;overflow-y: auto;");
                    } else if (index_y >= 5) {
                        $i1.attr("style", "position: absolute; bottom: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:" + height_two + "px;overflow-y: auto;");
                    }
                }
            }
        }else {
            if ($i1.height() <= height_one) {
                if (index_y < 5) {
                    $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                } else if (index_y >= 5) {
                    $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;");
                }
            } else {
                if (index_y < 5) {
                    $i1.attr("style", "position: absolute; top: -8px;left: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:112px;overflow-y: auto;");
                } else if (index_y >= 5) {
                    $i1.attr("style", "position: absolute; top: -8px;right: 25px;background-color: #117A8B;padding: 5px 20px;width: max-content;box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.05), 12px 12px 3px rgba(0, 0, 0, 0.1);z-index: 1000;white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;color: #fff;max-width: 500px;height:112px;overflow-y: auto;");
                }
            }
        }

        $i1.hide();
        $i1.show(300);
        $i.toggleClass("fa-plus-square fa-minus-square");

        /* 添加 $1 的点击事件 */
        $i.click(function () {
            $(this).toggleClass("fa-plus-square fa-minus-square");
            if ($(this).hasClass("fa-minus-square")) {
                $i1.show(300);
            } else {
                $i1.hide(250);
            }
        });
    }
});/* 点击结束 */